checkbox can not see from the interface flutter

1[This is how my page works. I want to get checkbox ticked and get the post paid number then can click the continue button. In my code checkbox is in between text and text form field Why i can not see my check box here and this is my code.]

 new Container(
                padding: const EdgeInsets.all(40.0),
                child: new Form(
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      new Text(
                        "Are you a post paid customer",
                        style: new TextStyle(
                          color: Colors.blue,
                          fontSize: 25.0,
                        ),
                      ),
                      new Checkbox(
                          activeColor: Colors.blue,
                          value: _isChecked,
                          onChanged: (bool val){
                            onChanged(val);}
                      ),
                      new TextFormField(
                        decoration: new InputDecoration(
                          labelText: "Post Paid Number",
                        ),
                        obscureText: true,
                        keyboardType: TextInputType.text,
                      ),
                      new Padding(
                        padding: const EdgeInsets.only(top: 60.0),
                      ),
                      new MaterialButton(
                        height: 50.0,
                        minWidth: 150.0,
                        color: Colors.blue,
                        splashColor: Colors.blue,
                        textColor: Colors.white,
                        child: new Text("Continue"),
                        onPressed: () {
                          Navigator.push(
                            context,
                            new MaterialPageRoute(builder: (context) => new RegPage()),
                          );
                        },
                      ),

1 answer

  • answered 2018-05-16 17:02 Arnold Parge

    Recreated your code and got it working.

    You need to change _isChecked in Checkbox's onChanged like:

    onChanged: (val) {
      setState(() {
        _isChecked = !_isChecked;
      });
    }),
    

    Make sure to do it in setState or the change wont be reflected on UI.

    My Code:

    import 'package:flutter/material.dart';
    import 'package:so_demo/sample_page.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      MyHomePageState createState() {
        return new MyHomePageState();
      }
    }
    
    class MyHomePageState extends State<MyHomePage> {
      bool _isChecked = false;
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('SO HELP'),
          ),
          body: new Container(
            padding: const EdgeInsets.all(40.0),
            child: new Form(
              child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      "Are you a post paid customer",
                      style: new TextStyle(
                        color: Colors.blue,
                        fontSize: 25.0,
                      ),
                    ),
                    new Checkbox(
                        activeColor: Colors.blue,
                        value: _isChecked,
                        onChanged: (val) {
                          setState(() {
                            _isChecked = !_isChecked;
                          });
                        }),
                    new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Post Paid Number",
                      ),
                      obscureText: true,
                      keyboardType: TextInputType.text,
                    ),
                    new Padding(
                      padding: const EdgeInsets.only(top: 60.0),
                    ),
                    new MaterialButton(
                      height: 50.0,
                      minWidth: 150.0,
                      color: Colors.blue,
                      splashColor: Colors.blue,
                      textColor: Colors.white,
                      child: new Text("Continue"),
                      onPressed: () {
                        Navigator.of(context).push(new MaterialPageRoute(builder: (context) => new RegPage());
                      },
                    ),
                  ]),
            ),
          ),
        );
      }
    }