Save user input with a textformfield in flutter?-CodePudding

Hi im new to Flutter and coding and tried do build my first to do app. I've created a textformfield to add new todos with a button in a container above. I used the texteditingcontroller to get the userinput and stored the input in a variable. To test the outcome, I simply tried to display the information under the button, but it didnt work. When pressing the button, the text doesn't change. What did I do wrong here?

landing_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_1/presentation/widgets/to_do_section.dart';

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

  @override
  State<LandingPage> createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> {
  @override
  Widget build(BuildContext context) {
    final _textController = TextEditingController();
    String userInput = "";
    return Scaffold(
      
      appBar: AppBar(
        title: const Center(child: Text("To-Do-App")),
        backgroundColor: Colors.redAccent,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const ToDos(),
            Column(
            children:  [
              Padding(
                padding: EdgeInsets.only(top: 8.0, left: 20, right: 20, bottom: 20),
                child: TextField(
                  controller: _textController,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "Add a new ToDo",
                  )  ,
                ),
                
              ),
              MaterialButton(
                color: Colors.redAccent,
                  onPressed: () {
                    setState(() {
                    userInput = _textController.text;
                  });
                    
                  },
                  child: Text("Admit", style: TextStyle(color: Colors.white),),
                  ),
                  Text(userInput)
            ],
          )],
        ),
      ),
    );
  }


}

to_do_section.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_application_1/responsive_layout.dart';

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

  @override
  State<ToDos> createState() => _ToDosState();
}

class _ToDosState extends State<ToDos> {
  
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Padding(
      padding: EdgeInsets.only(
          top: SizeConfig.blockSizeHorizontal * 10,
          left: SizeConfig.blockSizeVertical * 2.5,
          right: SizeConfig.blockSizeVertical * 2.5,
          bottom: SizeConfig.screenHeight / 8
          ),
      child: SizedBox(
        width: SizeConfig.blockSizeHorizontal*100,
        height: SizeConfig.blockSizeVertical*40,
        child: Container(
          decoration: BoxDecoration(
              color: Colors.grey[400],
              borderRadius: BorderRadius.circular(30),
              border: Border.all(
                  color: Colors.black45, style: BorderStyle.solid, width: 4)),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Text("hi"),
                
                ]),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Move these 2 variable declaration outside the build method. The build method is called when you setState and then it rebuilds again. That's the reason its not updated.

final _textController = TextEditingController();
    String userInput = "";
@override
  Widget build(BuildContext context) {
}