Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Save user input with a textformfield in flutter?

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading