flutter 常用视图组件

1.custom class widget

main.dart

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

void main() {
  runApp(new Application());
}
 class Application extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return new MaterialApp(
       title: 'custom',
       home: new Scaffold(
         body: new customWidgets()
       )
     );
   }
 }

custom.dart

import 'package:flutter/material.dart';

class customWidgets extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.pink,
      child: new Container(
        color: Colors.purple,
        margin: const EdgeInsets.all(10.0),
        child: new Container(
          color: Colors.orange,
          margin: const EdgeInsets.all(10.0),
          child: new Container(
            color: Colors.yellow,
            margin: const EdgeInsets.all(10.0),
          ),
        ),
      ),
    );
  }
}

 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侧边划出的效果

import 'package:flutter/material.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) {
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("a"),
            backgroundColor: Colors.green,
          ),
          drawer: new Drawer(
            child: new ListView(
              children: <Widget>[
                new UserAccountsDrawerHeader(
                  accountName: new Text('pengjinlong'),
                  accountEmail: new Text('pengjinlong43@gmail.com'),
                  currentAccountPicture: new CircleAvatar(
                    backgroundColor: Colors.black26,
                    child: new Text('Peng'),
                  ),
                  decoration: new BoxDecoration(color: Colors.blueAccent),
                  otherAccountsPictures: <Widget>[
                    new CircleAvatar(
                      backgroundColor: Colors.black26,
                      child: new Text('jin'),
                    ),
                    new CircleAvatar(
                      backgroundColor: Colors.black26,
                      child: new Text('long'),
                    ),
                  ],
                ),
                new ListTile(
                  title: new Text('d1'),
                  trailing: new Icon(Icons.accessibility),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                new ListTile(
                  title: new Text('d1'),
                  trailing: new Icon(Icons.accessibility),
                ),
                new ListTile(
                  title: new Text('d1'),
                  trailing: new Icon(Icons.accessibility),
                )
              ],
            ),
          ),
        )
    );
  }
}

6.switch按钮

import 'package:flutter/material.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) {
    return new MaterialApp(
        title: 'a',
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("a"),
            backgroundColor: Colors.green,
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Switch(
                  value: bval,
                  onChanged: (bool val) {
                    method1(val);
                  },
                )
              ],
            ),
          ),
        )
    );
  }
}

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实现登录框