Show hide widget

1,884 views
Skip to first unread message

alvaro arcas

unread,
Nov 16, 2016, 6:14:03 AM11/16/16
to Flutter Dev
How to show a widget using a checkbox state?

Seth Ladd

unread,
Nov 16, 2016, 12:14:48 PM11/16/16
to alvaro arcas, Flutter Dev
Hi Alvaro,

Thanks for reaching out. Can you be more specific? Do you mean "how to show a widget when a checkbox is checked, and hide the widget when the checkbox is unchecked" ?

Thanks for the additional context!

On Wed, Nov 16, 2016 at 3:14 AM, alvaro arcas <arca...@gmail.com> wrote:
How to show a widget using a checkbox state?

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

alvaro arcas

unread,
Nov 16, 2016, 12:19:28 PM11/16/16
to Flutter Dev
Yes thats what  I mean in first place. When the checkbox is check the widget appear. And when not it disappear.
Thanks Seth.


El miércoles, 16 de noviembre de 2016, 18:14:48 (UTC+1), Seth Ladd escribió:
Hi Alvaro,

Thanks for reaching out. Can you be more specific? Do you mean "how to show a widget when a checkbox is checked, and hide the widget when the checkbox is unchecked" ?

Thanks for the additional context!
On Wed, Nov 16, 2016 at 3:14 AM, alvaro arcas <arca...@gmail.com> wrote:
How to show a widget using a checkbox state?

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.

Hans Muller

unread,
Nov 16, 2016, 12:58:56 PM11/16/16
to alvaro arcas, Flutter Dev
Here's a example app that does what I think you're after.

import 'package:flutter/material.dart';

class CheckboxDemo extends StatefulWidget {
  @override
  _CheckboxDemoState createState() => new _CheckboxDemoState();
}

class _CheckboxDemoState extends State<CheckboxDemo> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text ('Checkbox Demo')),
      body: new Center(
        child: new Padding(
          padding: const EdgeInsets.all(16.0),
          child: new Row(
            children: <Widget>[
              new Checkbox(
                value: visible,
                onChanged: (bool value) {
                  setState(() {
                    visible = value;
                  });
                },
              ),
              new Container(
                padding: const EdgeInsets.all(16.0),
                width: 100.0,
                height: 100.0,
                decoration: new BoxDecoration(
                  backgroundColor: visible ? Colors.blue[400] : null,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(home: new CheckboxDemo()));
}


To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev+unsubscribe@googlegroups.com.

manuj...@docgrok.com

unread,
Dec 17, 2017, 2:30:19 PM12/17/17
to Flutter Dev
This doesn't really work to hid the component. it only changes the background color.
 What is the Container had children. They are still visibility.
Does flutter not have a visibility parameter

mr...@google.com

unread,
Dec 17, 2017, 4:10:37 PM12/17/17
to Flutter Dev
You can wrap your widget in an Opacity, then control the opacity property of that using the checkbox.

Jakob Roland Andersen

unread,
Dec 18, 2017, 4:32:41 AM12/18/17
to Flutter Dev
Flutter doesn't have a visibility parameter because it's not really needed. If you don't want a widget to be shown, then don't add it to the tree.

In this case, the build() method could be something like:

  @override
  Widget build(BuildContext context) {
    final children = <Widget>[
      new Checkbox(
          value: visible,
          onChanged: (bool value) {
            setState(() {
              visible = value;
            });
          },
      ),
    ];
    if (visible) {
      children.add(new Container(
          padding: const EdgeInsets.all(16.0),
          width: 100.0,
          height: 100.0,
          decoration: new BoxDecoration(
              backgroundColor: Colors.blue[400],
          ),
      ));
    }
    return new Scaffold(
      appBar: new AppBar(title: new Text ('Checkbox Demo')),
      body: new Center(
        child: new Padding(
          padding: const EdgeInsets.all(16.0),
          child: new Row(
            children: children,
          ),
        ),
      ),
    );
  }

This way, you have complete control over what is shown depending on the toggle. With the code above, the container is complete gone when the toggle is off. If you wanted to keep it in (to reserve the space) but not add any children to it, you could also do that. The build() methods allow you to build completely different widget trees depending on the state, so all you have to do is produce the widgets you actually want to show.

Andrew Wilson

unread,
Dec 19, 2017, 11:26:20 AM12/19/17
to Jakob Roland Andersen, flutter-dev
Use Offstage widget.  It takes a boolean which determines if it's painted or not.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages