Flutter TextField value disappear when clicked on another textField

Question

Am New in Flutter, Now am trying to add ModalBottomSheet with some textfields and whenever i try to tap on another textField then value got disappeared automatically.

Here is my new_user.dart file

import 'package:flutter/material.dart';

class newUsers extends StatelessWidget {
 
  var nameInputController = TextEditingController();
  var marksInputController = TextEditingController();

  Function? addNewUser;

  newUsers(this.addNewUser);

  void submitData() {
    print(nameInputController.text);
    if (nameInputController.text.isEmpty || marksInputController.text.isEmpty) {
      return;
    }

    addNewUser!(
        nameInputController.text, double.parse(marksInputController.text));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          TextField(
            decoration: InputDecoration(labelText: "Name"),
            controller: nameInputController,
          ),
          TextField(
            decoration: InputDecoration(labelText: "Marks"),
            controller: marksInputController,
            keyboardType: TextInputType.number,
          ),
          ElevatedButton(
            onPressed: submitData,
            child: Text('Add User Details'),
          ),
        ],
      ),
    );
  }
}

Home.dart

import 'package:expense_manager/widgets/new_users.dart';
import 'package:expense_manager/widgets/users.dart';
import 'package:expense_manager/widgets/users_list.dart';

import 'models/users.dart';
import 'package:flutter/material.dart';

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

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

class _HomeState extends State<Home> {
  List<User> users = [
    User(id: 1, name: 'himanshurahi', marks: 44.5, createdAt: DateTime.now()),
  ];

  void addNewUser(String name, double marks) {
    var newUser =
        User(id: 1, name: name, marks: marks, createdAt: DateTime.now());

    setState(() {
      users.add(newUser);
    });
  }

  @override
  Widget build(BuildContext context) {
    void addNewUserWithSheet(BuildContext context) {
      showModalBottomSheet(
        context: context,
        builder: (btx) {
          return newUsers(addNewUser);
        },
      );
    }

    return Scaffold(
        appBar: AppBar(
          title: Text('my App'),
          actions: [
            IconButton(
                onPressed: () => addNewUserWithSheet(context),
                icon: Icon(Icons.add))
          ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () => addNewUserWithSheet(context),
            child: Icon(Icons.add)),
        body: Container(
          child: Column(
            children: [
              Container(
                width: double.infinity,
                height: 100,
                child: Card(
                  color: Colors.blueAccent,
                  child: Text("Chart"),
                ),
              ),
              newUsers(addNewUser),
              usersList(users)
            ],
          ),
        ));
  }
}

Here i have added addNewUserWithSheet method to add bottom sheet. here is main.dart file (if need)

import 'package:expense_manager/home.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

Thanx in advance :)

Answer 1

Ahhh I Basically solved it by using Stateful Widget.