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