Show widget when button is clicked (Dart, Flutter)

Question

how can I show a widget (for example some more buttons) when a button is clicked.

FlatButton(
          onPressed: () {
            //render the new widgets
          },
          
          child: Icon(
            Icons.close,
            color: Colors.white,
          ),
        ));

This is the parent class class StopStream extends StatelessWidget

Answer 1

1. You can conditionally show / hide a widget(s) with a help of a variable.
2. You need a StatefulWidget to change the state of a widget i.e to dynamically show / hide (widgets).

Please see the following code, I use a bool showWidget to show or hide more FlatButton's in a Row :

import 'package:flutter/material.dart';

final Color darkBlue = const 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
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool showWidget = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        showWidget
            ? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FlatButton(
                    onPressed: () {},
                    child: const Icon(Icons.ac_unit),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: const Icon(Icons.accessible),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: const Icon(Icons.backpack),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: const Icon(Icons.cached),
                  ),
                ],
              )
            : Container(),
        FlatButton(
          onPressed: () {
            setState(() {
              showWidget = !showWidget;
            });
          },
          child: const Icon(
            Icons.close,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

Answer 2

Have a state variable (either in State or in something like Provider or Riverpod) that will be toggled by your onPressed: callback. Then allow that variable to control whether or not the widget in question is shown or omitted from the widget tree.

Answer 3

You can use a bool variable Forexample in my case isSwitched and set its value to false. When the user clicks on the button, set its value to true and use conditional operator to show more widgets as follows:

class CoverScreen extends StatefulWidget {
@override
_CoverScreenState createState() => _CoverScreenState();
}

class _CoverScreenState extends State<CoverScreen> {
bool isSwitched = false;

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
      toolbarHeight: 70,
      title: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            child: Text('WELCOME'),
          ),
        ],
      )),
  body: Padding(
      padding: const EdgeInsets.all(10),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(children: <Widget>[
              Container(
                  padding: const EdgeInsets.all(15),
                  child: Text(
                    'COVER LETTER:',
                    style: TextStyle(
                        color: Colors.teal,
                        fontSize: 25,
                        fontWeight: FontWeight.w500),
                  )),
              Container(
                  child: Switch(
                value: isSwitched,
                onChanged: (value) {
                  setState(() {
                    isSwitched = value;

                    print(isSwitched);
                  });
                },
                activeTrackColor: Colors.teal,
                activeColor: Colors.white,
              )),
            ]),
            Column(children: <Widget>[
              isSwitched
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                          Padding(
                              padding: const EdgeInsets.all(10),
                              child: Text(
                                'NAME:',
                                style: TextStyle(
                                    color: Colors.teal,
                                    fontSize: 20,
                                    fontWeight: FontWeight.w500),
                              )),
                          Container(
                            child: TextField(
                              decoration: new InputDecoration(
                                  contentPadding:
                                      const EdgeInsets.all(20.0),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.teal, width: 2.0),
                                  ),
                                  hintText: 'Enter NAME'),
                            ),
                          ),
                        ])
                  : Container(),
            ])
          ])),
);
}
}

The output for the above code is as follows: Before button click After Button click