Displaying a ListView widget when a button is pressed

Question

I am trying to display the widget (NewWidget) when a button is pressed. Ideally the button will be a part of the widget and when it is pressed the rest of the widget will be displayed. I'm not getting it to work though. Can someone please take a look? It should only take a minute. Thanks!!

It's a simple app. for the body NewWidget is called, and I just want it to display a button and then when pressed display the rest of the widget.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
       //This is where NewWidget is called
        body: NewWidget(
          Options: [
            {
              "display": "Australia",
              "value": 1,
              "checked": false
            },
            {
              "display": "Finland",
              "value": 2,
              "checked": false
            }
          ]
        ),
        ),
      );
  }
}


class NewWidget extends StatefulWidget {
  //const NewWidget({ Key key }) : super(key: key);
  //final List Options;

  @override
  _NewWidgetState createState() => _NewWidgetState();
  final List Options;

  NewWidget({
    this.Options
  }) : super();
}



class _NewWidgetState extends State<NewWidget> {

List _localDataSource = [];

  @override
  void initState() {
    super.initState();
    widget.Options.forEach((item) {
      var newItem = {
        'display': item['display'],
        'value': item['value'],
        'checked': item['checked']
      };
      _localDataSource.add(newItem);
    });
  }

  @override
  Widget build(BuildContext context) {

    ListView _Olist() {
      List<Widget> options = [];
      _localDataSource.forEach((item) {
        options.add(ListTile(
          title: Text(item['display']),
          leading: Transform.scale(
          child: Icon(
            item['checked'] ? Icons.check_box : Icons.check_box_outline_blank),
            scale: 1.4,
          ),
        onTap: () {
          item['checked'] = !item['checked'];
          setState(() {});
        })
);});


        return ListView(children: options);
      }

    return _Olist();
      }
    }

Answer 1

You can initialize a boolean and set it to false: bool buttonClicked = false

Then instead of having your build simply return your _oList, you can implement a conditional statement and

• return the button if buttonClicked = false or
• return _oList if buttonClicked = true

Then just setState and change buttonClicked = !buttonClicked when the button is pressed.

Here's what it might look like:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        //This is where NewWidget is called
        body: NewWidget(options: [
          {"display": "Australia", "value": 1, "checked": false},
          {"display": "Finland", "value": 2, "checked": false}
        ]),
      ),
    );
  }
}

class NewWidget extends StatefulWidget {
  //const NewWidget({ Key key }) : super(key: key);
  //final List Options;

  @override
  _NewWidgetState createState() => _NewWidgetState();
  final List options;

  NewWidget({this.options}) : super();
}

class _NewWidgetState extends State<NewWidget> {
  List _localDataSource = [];

  @override
  void initState() {
    super.initState();
    widget.options.forEach((item) {
      var newItem = {
        'display': item['display'],
        'value': item['value'],
        'checked': item['checked']
      };
      _localDataSource.add(newItem);
    });
  }

  bool buttonClicked = false;

  @override
  Widget build(BuildContext context) {
    ListView _oList() {
      List<Widget> options = [];
      _localDataSource.forEach((item) {
        options.add(ListTile(
            title: Text(item['display']),
            leading: Transform.scale(
              child: Icon(item['checked']
                  ? Icons.check_box
                  : Icons.check_box_outline_blank),
              scale: 1.4,
            ),
            onTap: () {
              item['checked'] = !item['checked'];
              setState(() {});
            }));
      });

      return ListView(children: options);
    }

    if (buttonClicked) {
      return _oList();
    } else {
      return Center(
        child: FlatButton(
          padding: EdgeInsets.all(20.0),
          child: Text(
            'Click Me',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          color: Colors.lightBlue,
          onPressed: () {
            setState(() {
              buttonClicked = !buttonClicked;
            });
          },
        ),
      );
    }
  }
}