DEV Community

Cover image for Add new Widget on Pressing Button in Flutter
Arshdeep Singh
Arshdeep Singh

Posted on Originally published at github.com

Add new Widget on Pressing Button in Flutter

    import 'dart:core';
    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  TextEditingController noteSend = TextEditingController();

  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List.generate(
    count,
    (int i) => new InputWidget(
          i,
          noteRec: listString[i],
        ));

    return new Scaffold(
        appBar: new AppBar(title: new Text('some title')),
        body: Column(
          children: <Widget>[
            Container(
              child: TextField(
                controller: noteSend,
              ),
              color: Colors.lightBlueAccent,
              width: 150,
              height: 50,
            ),
            Expanded(
              child: ListView(
                children: children,
                scrollDirection: Axis.vertical,
              ),
            ),
          ],
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: () {
            setState(() {
              count = count + 1;
            });
          },
        ));
  }
}

class InputWidget extends StatefulWidget {
  final int index;
  final String noteRec;
  InputWidget(this.index, {Key key, this.noteRec}) : super(key: key);

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

class _InputWidgetState extends State<InputWidget> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Icon(
                Icons.image,
                size: 75,
              )
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 80, right: 30),
            child: Column(
              children: <Widget>[
                Text('Note'),
              ],
            ),
          ),
          Column(
            children: <Widget>[
              Text("${widget.noteRec}"),
            ],
          ),
        ],
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
arshdeepsahni profile image
Arshdeep Singh

For more information,
do have a look at my github repository github.

Check my profile and do give a follow if you like the content.
Contributions are appreciable and Thanks in advance to all of you!