Home > front end >  How to validate and send the data to another page in flutter
How to validate and send the data to another page in flutter

Time:10-18

I am a newbie to flutter and i would to like to create simple input data and pass the data to other page and show the text.

here is my code

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm({Key? key}) : super(key: key);

  @override
  MyFormState createState() {
    return MyFormState();
  }
}


class MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {

    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
           ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page2(_formKey)),
                  );

                }
              },
              child: const Text('Submit'),
            ),
        ],
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  Page2(final data){
    this.data = data;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(this.data),
            RaisedButton(
              child: Text('BACK'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

But finally, it gets
The setter 'data' isn't defined for the type 'Page2'. error

Any idea how to do it??

and what's wrong with my code

Thank you very much.

CodePudding user response:

You can make a global variable and easily use it on other screen. all you need is updating some of your code to the following

  final _formKey = GlobalKey<FormState>();
  TextEditingController inputController = TextEditingController();
  String result;

  class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm({Key? key}) : super(key: key);

  @override
  MyFormState createState() {
    return MyFormState();
  }
}


class MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {

    return SafeArea(
  child: Scaffold(
    body: Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            controller: inputController,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                setState(() {
                  result = inputController.text;
                });
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page2()),
                );

              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    ),
  ),
);
  }
}

class Page2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
  appBar: AppBar(
    title: Text('Page 2'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(result),
        RaisedButton(
          child: Text('BACK'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
);
  }
}

CodePudding user response:

You should define data in Page2, something like this :

class Page2 extends StatelessWidget {
  final data = GlobalKey<FormState>();

  Page2(final data){
    this.data = data;
  }

CodePudding user response:

See Send data to a new screen in the Flutter cookbook.

  • Related