Save user input with a textformfield in flutter? - flutter

Question

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"),
]),
),
),
),
);
}
}

Answer 1

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) {
}