Flutter - Render new Widgets on click

Question

The title basically says it all. A very nooby question... I have this basic code to create the initial state of my app :

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 render a new Widget when the user clicks on a button? Let's say I want to instantiate another InputWidget.

thanks

Answer 1

I hope I understand your question correctly...

I think the main point is that you should not think of "another" widget - if you change the content of MyHomePage from having first one child and then two you don't really keep the first child and then add another child. You simply first say "I want one child" and then you change your mind and say "I want two children".

In your code you do this by calling setState inside _MyHomePageState. Flutter takes care of keeping the first and adding the 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 this what you meant?

Answer 2

Your build function is "just code", so you can build the array 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 sort of bool field that you set when the button is tapped.