flutter 常用视图组件

1.custom class widget

main.dart

 1 import 'package:flutter/material.dart';
 2 import './pages/custom.dart';
 3
 4 void main() {
 5   runApp(new Application());
 6 }
 7  class Application extends StatelessWidget {
 8    @override
 9    Widget build(BuildContext context) {
10      return new MaterialApp(
11        title: 'custom',
12        home: new Scaffold(
13          body: new customWidgets()
14        )
15      );
16    }
17  }

custom.dart

 1 import 'package:flutter/material.dart';
 2
 3 class customWidgets extends StatelessWidget {
 4   @override
 5   Widget build(BuildContext context) {
 6     return new Container(
 7       color: Colors.pink,
 8       child: new Container(
 9         color: Colors.purple,
10         margin: const EdgeInsets.all(10.0),
11         child: new Container(
12           color: Colors.orange,
13           margin: const EdgeInsets.all(10.0),
14           child: new Container(
15             color: Colors.yellow,
16             margin: const EdgeInsets.all(10.0),
17           ),
18         ),
19       ),
20     );
21   }
22 }

2.radio单选按钮

import 'package:flutter/material.dart';

void main() {
  runApp(new Application());
}
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  int rvalue = 0;
  void method1(value) {
    setState(() {
      rvalue = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("a"),
            backgroundColor: Colors.green,
          ),
          body: new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Radio(value: 1, groupValue: rvalue, onChanged: (int rval){method1(rval);}),
                new Radio(value: 2, groupValue: rvalue, onChanged: (int rval){method1(rval);}),
                new Radio(value: 3, groupValue: rvalue, onChanged: (int rval){method1(rval);}),
              ],
            ),
          ),
        )
    );
  }
}

3.checkbox复选框

import 'package:flutter/material.dart';

void main() {
  runApp(new Application());
}
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  bool select = false;
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("a"),
            backgroundColor: Colors.green,
          ),
          body: new Center(
            child: new Checkbox(
                value: select,
                onChanged: (bool cb) {
                  setState(() {
                    select = cb;
                    print(select);
                  });
                }),
          ),
        )
    );
  }
}

4.snackBar通知条

import 'package:flutter/material.dart';
import './pages/OtherPage.dart';

void main() {
  runApp(new Application());
}
class Application extends StatefulWidget {
  @override
  _ApplicationState createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> {
  bool bval = false;
  void method1(value) {
    setState(() {
      bval = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> _skey = new GlobalKey<ScaffoldState>();
    void method1() {
      _skey.currentState.showSnackBar(new SnackBar(
        content: new Text('Activated snack bar'),
        backgroundColor: Colors.blue,
      ));
    }
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          key: _skey,
          body: new Center(
            child: new RaisedButton(
              onPressed: () {method1();},
              child: new Text('raisebtn'),
            ),
          ),

        )
    );
  }
}

5.drawer，类似qq侧边划出的效果

 1 import 'package:flutter/material.dart';
 2
 3 void main() {
 4   runApp(new Application());
 5 }
 6 class Application extends StatefulWidget {
 7   @override
 8   _ApplicationState createState() => _ApplicationState();
 9 }
10
11 class _ApplicationState extends State<Application> {
12   bool bval = false;
13   void method1(value) {
14     setState(() {
15       bval = value;
16     });
17   }
18   @override
19   Widget build(BuildContext context) {
20     return new MaterialApp(
21         title: 'a',
22         home: new Scaffold(
23           appBar: new AppBar(
24             title: new Text("a"),
25             backgroundColor: Colors.green,
26           ),
27           drawer: new Drawer(
28             child: new ListView(
29               children: <Widget>[
30                 new UserAccountsDrawerHeader(
31                   accountName: new Text('pengjinlong'),
32                   accountEmail: new Text('pengjinlong43@gmail.com'),
33                   currentAccountPicture: new CircleAvatar(
34                     backgroundColor: Colors.black26,
35                     child: new Text('Peng'),
36                   ),
37                   decoration: new BoxDecoration(color: Colors.blueAccent),
38                   otherAccountsPictures: <Widget>[
39                     new CircleAvatar(
40                       backgroundColor: Colors.black26,
41                       child: new Text('jin'),
42                     ),
43                     new CircleAvatar(
44                       backgroundColor: Colors.black26,
45                       child: new Text('long'),
46                     ),
47                   ],
48                 ),
49                 new ListTile(
50                   title: new Text('d1'),
51                   trailing: new Icon(Icons.accessibility),
52                   onTap: () {
53                     Navigator.pop(context);
54                   },
55                 ),
56                 new ListTile(
57                   title: new Text('d1'),
58                   trailing: new Icon(Icons.accessibility),
59                 ),
60                 new ListTile(
61                   title: new Text('d1'),
62                   trailing: new Icon(Icons.accessibility),
63                 )
64               ],
65             ),
66           ),
67         )
68     );
69   }
70 }

6.switch按钮

 1 import 'package:flutter/material.dart';
 2
 3 void main() {
 4   runApp(new Application());
 5 }
 6 class Application extends StatefulWidget {
 7   @override
 8   _ApplicationState createState() => _ApplicationState();
 9 }
10
11 class _ApplicationState extends State<Application> {
12   bool bval = false;
13   void method1(value) {
14     setState(() {
15       bval = value;
16     });
17   }
18   @override
19   Widget build(BuildContext context) {
20     return new MaterialApp(
21         title: 'a',
22         home: new Scaffold(
23           appBar: new AppBar(
24             title: new Text("a"),
25             backgroundColor: Colors.green,
26           ),
27           body: new Center(
28             child: new Column(
29               mainAxisAlignment: MainAxisAlignment.center,
30               children: <Widget>[
31                 new Switch(
32                   value: bval,
33                   onChanged: (bool val) {
34                     method1(val);
35                   },
36                 )
37               ],
38             ),
39           ),
40         )
41     );
42   }
43 }

7.listView

class _ApplicationState extends State<Application> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'dummy application',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('List widget'),
          ),
          body: new ListView(
            children: <Widget>[
              new ListTile(
                title: new Text('item 1dd'),
                trailing: new Icon(Icons.arrow_forward),
              ),
              new ListTile(
                title: new Text('item 2'),
                trailing: new Icon(Icons.arrow_forward),
              ),
              new ListTile(
                title: new Text('item 3'),
                trailing: new Icon(Icons.arrow_forward),
              ),
            ],
          ),
        )
    );
  }
}

tips: listview的title属性可以设置InputFiled实现登录框