Flutter Returning Data from Widget

Question

Before anything I first apology for my English.

So in order to write pretty code, I've parsed my code in multiple file. To just call widget and make easy to read code.

But one of my widget is a FormField and I don't know how to recover the input out of the widget in my main screen.

Here is the main screen code :

import 'package:ChatApp/pretty_form.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SignUp(),
    );
  }
}

class SignUp extends StatefulWidget {
  SignUp({
    Key key,
  }) : super(key: key);

  @override
  _SignUpState createState() => _SignUpState();
}

class _SignUpState extends State<SignUp> {
  String email = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SignUp"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            email = PrettyForm(text: "Enter your email adress"),
            PrettyForm(text: "Enter your mdp"),
          ],
        ),
      ),
    );
  }
}

And here is the code the I import in the first file :

  import 'package:flutter/material.dart';
  import 'tools.dart';

  class PrettyForm extends StatefulWidget {
    PrettyForm({Key key, this.text, this.height, this.width}) : super(key: key);
    String text;
    double height;
    double width;
    @override
    _PrettyFormState createState() => _PrettyFormState();
  }

  class _PrettyFormState extends State<PrettyForm> {
    @override
    Widget build(BuildContext context) {
      double screen_height = MediaQuery.of(context).size.height;
      double screen_width = MediaQuery.of(context).size.width;
      final form_controller = TextEditingController();
      double height = my_percent(5, screen_height);

      return Container(
        width: width,
        height: height,
        margin: EdgeInsets.all(my_percent(2, screen_height)),
        decoration: BoxDecoration(
            borderRadius: new BorderRadius.all(Radius.circular(18.0)),
            border: Border.all(color: Colors.grey)),
        child: TextFormField(
          textAlign: TextAlign.center,
          controller: form_controller,
          decoration:
              InputDecoration(border: InputBorder.none, hintText: widget.text),
          onChanged: (value) {
            print(value);
          },
        ),
      );
    }
  }

If you look at the first PrettyForm call I'm trying to recover the email input in a String. How can I return the input value from the call to PrettyForm widget to the SignUp widget (SignUp is the main screen)

Answer 1

you need to use onValueChanged property

import 'package:ChatApp/pretty_form.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SignUp(),
    );
  }
}

class SignUp extends StatefulWidget {
  SignUp({
    Key key,
  }) : super(key: key);

  @override
  _SignUpState createState() => _SignUpState();
}

class _SignUpState extends State<SignUp> {
  String email = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SignUp"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            email = PrettyForm(text: "Enter your email adress",(newValue) => email),
            PrettyForm(text: "Enter your mdp",(newValue) => password),
          ],
        ),
      ),
    );
  }
}

form

import 'package:flutter/material.dart';
import 'tools.dart';

class PrettyForm extends StatefulWidget {
  PrettyForm({
    Key key,
    this.text,
    this.height,
    this.width,
    this.onChanged,
  }) : super(key: key);
  String text;
  double height;
  double width;

  // add this
  final ValueChanged<String> onChanged;

  @override
  _PrettyFormState createState() => _PrettyFormState();
}

class _PrettyFormState extends State<PrettyForm> {
  @override
  Widget build(BuildContext context) {
    double screen_height = MediaQuery.of(context).size.height;
    double screen_width = MediaQuery.of(context).size.width;
    final form_controller = TextEditingController();
    double height = my_percent(5, screen_height);

    return Container(
      width: width,
      height: height,
      margin: EdgeInsets.all(my_percent(2, screen_height)),
      decoration: BoxDecoration(
          borderRadius: new BorderRadius.all(Radius.circular(18.0)),
          border: Border.all(color: Colors.grey)),
      child: TextFormField(
        textAlign: TextAlign.center,
        controller: form_controller,
        decoration:
            InputDecoration(border: InputBorder.none, hintText: widget.text),
        onChanged: (value) {
          print(value);
          widget.onChanged(newValue);
        },
      ),
    );
  }
}