Flutter - display new widgets on click

Question

The name basically says it all. Very Nubian question ... I have this basic code to create the initial state of my application:

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Some title'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text(config.title)), body: new Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ new InputWidget(), ] ), ); } } 

Now, how can I visualize a new widget when a user clicks a button? Let's say I want to instantiate another InputWidget.

thanks

Answer 1

I hope I understood your question correctly ...

I think that the main thing is that you should not think about the “other” widgets - if you change the content of MyHomePage from the first child, and then by two you really will not leave the first child, and then add another child. You just say “I want one child” first, and then you change your mind and say “I want two children”.

In code, you do this by calling setState inside _MyHomePageState . Flutter takes care of saving the first and adding a second child.

 import 'dart:core'; import 'package:flutter/material.dart'; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Some title'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int count = 1; @override Widget build(BuildContext context) { List<Widget> children = new List.generate(count, (int i) => new InputWidget(i)); return new Scaffold( appBar: new AppBar(title: new Text(widget.title)), body: new Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: children ), floatingActionButton: new FloatingActionButton( child: new Icon(Icons.add), onPressed: () { setState(() { count = count + 1; }); }, ) ); } } class InputWidget extends StatelessWidget { final int index; InputWidget(this.index); @override Widget build(BuildContext context) { return new Text("InputWidget: " + index.toString()); } } 

Is that what you meant?

Answer 2

Your build function is “just code,” so you can build an array that you pass to the column dynamically using something like

 var children = []; children.add(new InputWidget()); if (_showAnother) children.add(new InputWidget()); ... body: new Column( ... children: children, ... 

... where _showAnother is some kind of bool field that you set when you click the button.