Flutter setState adding items dynamically

user_17218011 0
Viewed 91

So I wanna the user type in the TextFormField then pop in the Text field above using setState or if anyone has better suggestion to implement that. I'd improve that text field afterwards with a list or something...

setState Code

  TextEditingController textcontroller = TextEditingController();
  
  Widget addtasks() {
    setState(() {
      Text(textcontroller.text);
    });
    return Text(textcontroller.text);
  }

Form Maker CODE

Widget form_maker(textcontroller) {
  return TextFormField(
    controller: textcontroller,
    keyboardType: TextInputType.text,
    onFieldSubmitted: (String value) {
      print(value);
    },
    onChanged: (String value) {
      print(value);
    },
    decoration: const InputDecoration(
      labelText: 'Add task...',
      prefixIcon: Icon(
        Icons.add,
      ),
      border: OutlineInputBorder(),
    ),
  );
}

Also the FloatingActionButton have plans for it i implemented the ShowBottomSheet but couldn't link it to anything from the body onPressed func in it

FAB CODE

floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        backgroundColor: Colors.red,
        hoverColor: Colors.white,
        splashColor: Colors.white,
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (context) {
                return Wrap(
                  children: [
                    InkWell(
                      child: const ListTile(
                        leading: Icon(Icons.edit),
                        title: Text('Add Task'),
                      ),
                      onTap: () {},
                    ),
                    const ListTile(
                      leading: Icon(Icons.share),
                      title: Text('Share'),
                    ),
                    const ListTile(
                      leading: Icon(Icons.link),
                      title: Text('Get link'),
                    ),
                    const ListTile(
                      leading: Icon(Icons.remove_outlined),
                      title: Text('Remove'),
                    ),
                  ],
                );
              });
        },
      ),

UI current look

setstate dart flutter floating-action-button
1 Answers

Just use setState in onChanged callback

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {

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

class _MyWidget extends State<MyWidget> {

  String text = "";
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(
        text,
        style: Theme.of(context).textTheme.headline4,
      ),
      const Divider(),
      TextFormField(
        controller: _controller,
        decoration: const InputDecoration(
          labelText: 'Add task...',
          prefixIcon: Icon(
            Icons.add,
          ),
          border: OutlineInputBorder(),
        ),
        keyboardType: TextInputType.text,
        onChanged: (val) {
          setState(() {
            text = _controller.text;
          });
        },
      )
    ]);
  }
}

You can also do the same without TextEditingController by putting value of the field

        onChanged: (val) {
              setState(() {
                text = val;
              });
            }
user_145331260
Related