How To Add Text from the different dart file

Question

I am trying change the text on the click of the button using flutter.

I have splited the widgets to different dart files. I want to add text from the different dart file but getting error as "Positional arguments must occur before named arguments. while passing the value to the constructor named TextOutput.

What does this error mean? a beginner in flutter so explanation of this error will be a great help.

I am trying to pass value to the contructor but getting this error.

class TextControlState  extends State<TextControl> {
  String _mainText="Hey Divya Here!";
  void _changeText() {
    setState(() {
     this._mainText = "This changed!"; 
    });
  }
Widget build(BuildContext context) {
    return Center(
    child: Container( 
      margin: EdgeInsets.all(8),
          child: 
          RaisedButton(
            child: 
            Text('Change Text', style: TextStyle(color: Colors.white, fontSize: 18)), 
            onPressed: _changeText,
            ),
            TextOutput(_mainText)

      ),
    );

TextOutput dart file

import 'package:flutter/material.dart';



class TextOutput extends StatelessWidget {
   final String mainText;
   TextOutput(this.mainText);
  @override
  Widget build(BuildContext context) {
    return Text(mainText);
  }
}

The value of the text should be changed on clicking of the button.

You are trying to add the TextOutput widget into the Container, but it already has a child - the RaisedButton. Do you want the button and output to both appear inside the container? If so, put a Column in the container and add the other two widgets to that. As it stands, this has nothing to do with moving the second widget to its own source file. — Richard Heap
Yes I want the button and output to both appear inside the container, so inside the column I have to add Raised button and TextOutput both as a child widget? — divya dave

Max Macfarlane Max Macfarlane · Accepted Answer · 2019-07-27T11:38:15

OK it sounds like you actually want to do this instead then:

class _TextControlState extends State<TextControl> {
  String _mainText = "Hey Divya Here!";

  void _changeText() {
    setState(() {
      this._mainText = "This changed!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.all(8),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextOutput(_mainText),
            RaisedButton(
              child: Text('Change Text', style: TextStyle(color: Colors.white, fontSize: 18)),
              onPressed: _changeText,
            ),
          ],
        ),
      ),
    );
  }
}

This now wraps the raised button in a column which allows you to add additional widgets so you in this example i have added you text above, and when the button is click the text value now changes not the button text.

How To Add Text from the different dart file

1 Answers