flutter 基本组件的使用
入门。介绍各种功能或组件的使用
有点乱。已import 导包作为分隔吧
flutter中文网 ： https://flutterchina.club/tutorials/
//主题
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appName = '自定义主题';
// TODO: implement build
return new MaterialApp(
title: appName,
theme: new ThemeData(
brightness: Brightness.light,//应用程序整体主题的亮度
primaryColor: Colors.lightGreen[600],//App主要部分的背景色
accentColor: Colors.orange[600],//前景色
),
home: new MyHomePages(title : appName,),
);
}
}
class MyHomePages extends StatelessWidget{
final String title;
MyHomePages({Key key,@required this.title}):super(key:key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: new Container(
//获取主题的accentColor
color: Theme.of(context).accentColor,
child: new Text(
'd带有背景颜色的文本组件',
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.grey),
child: new FloatingActionButton(onPressed: null,child: new Icon(Icons.computer),
),
),
);
}
}
//导第三方
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: '第三方包实例',
home: new Scaffold(
appBar: new AppBar(
title: new Text('第三方包实例'),
),
body: new Center(
child: new RaisedButton(
onPressed: (){
//指定url发起请求
const url = 'https://www.baidu.com';
launch(url);
},
child: new Text('打开百度'),
),
),
),
);
}
}
//http请求
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: 'http请求实例',
home: new Scaffold(
appBar: new AppBar(
title: new Text('http请求实例'),
),
body: new Center(
child: new RaisedButton(onPressed: (){
var url = 'http://httpbin.org/';
//向http发送get请求
http.get(url).then((response){
print("状态:${response.statusCode}");
print("正文:${response.body}");
});
},
child: new Text('发起http请求'),
),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main(){
runApp(
new MaterialApp(
title: 'Image demo',
home: new ImageDemo(),
)
);
}
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
//添加网络图片
child: new Image.network(
//图片url
'https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b812c8fcc3cec3fd84e2d8d4df88d43f869427b6.jpg',
//填充模式
fit: BoxFit.fitWidth,
),
);
}
}
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main(){
runApp(
new MaterialApp(
title: 'Text demo',
home: new ImageDemo(),
)
);
}
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('图片组件示例'),
),
body: new Center(
child: new RaisedButton(
onPressed: (){
print('danoihanckaja');
},
child: new Text('button组件'),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final title = '基础列表示例';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
//添加基础列表
body: new ListView(
//静态数据
children:
ListTile(
//图标
leading: Icon(Icons.alarm),
//文本
title: Text('Alarm'),
),
ListTile(
//图标
leading: Icon(Icons.phone),
//文本
title: Text('phone'),
),
ListTile(
//图标
leading: Icon(Icons.airplay),
//文本
title: Text('airplay'),
),
ListTile(
//图标
leading: Icon(Icons.pages),
//文本
title: Text('pages'),
),
ListTile(
//图标
leading: Icon(Icons.backspace),
//文本
title: Text('ndakwd'),
),
ListTile(
//图标
leading: Icon(Icons.satellite),
//文本
title: Text('daljsid'),
),
],
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final title = '基础列表示例';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: Text(title),),
body: Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: ListView(
//设置水平排列
scrollDirection: Axis.horizontal,
//添加子元素
children:
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.deepOrangeAccent,
),
Container(
width: 160.0,
color: Colors.green,
child: Column(
children:
Text(
'水平',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 36.0,
),
),
Text(
'列表',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 36.0,
),
),
],
),
),
Container(
width: 160.0,
color: Colors.amberAccent,
),
Container(
width: 160.0,
color: Colors.lightBlueAccent,
),
Container(
width: 160.0,
color: Colors.lightGreenAccent,
),
Container(
width: 160.0,
color: Colors.limeAccent,
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp(
));
class MyApp extends StatefulWidget {
@override
_LoginPageState createState() => new _LoginPageState();
}
class _LoginPageState extends State
GlobalKey
String userName;
String password;
void login(){
var loginForm = loginKey.currentState;
//验证表单
if(loginForm.validate()){
loginForm.save();
print('userName:'+userName+'password'+password);
}
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title : 'Form表单示例',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Form表单示例'),
),
body: new Column(
children:
new Container(
padding: const EdgeInsets.all(16.0),
child: new Form(
key :loginKey,
child: new Column(
children:
new TextFormField(
decoration: new InputDecoration(
labelText: '请输入用户名',
),
onSaved: (value){
userName = value;
},
onFieldSubmitted: (value){
},
),
new TextFormField(
decoration: new InputDecoration(
labelText: '请输入密码',
),
obscureText: true,
validator: (value){
return value.length < 6 ? "密码长度不够6位" : null;
},
onSaved: (value){
password = value;
},
),
],
),
),
),
new SizedBox(
width: 340.0,
height: 42.0,
child: new RaisedButton(onPressed: login,child: new Text('登录',style: TextStyle(fontSize: 18.0),),),
)
],
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: new MyHomePage(),
title: '路由App',
routes: {
'/first': (BuildContext context) => FirstPage(), //添加路由
'/second': (BuildContext context) => SecondPage(), //添加路由
},
initialRoute: '/first', //初始路由页面
);
}
}
class SecondPage extends StatelessWidget {
//第二个路由页面
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text('这是第二页'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '/first');
},
child: Text(
'这是第二页',
style: TextStyle(fontSize: 28.0),
),
),
),
);
}
}
class FirstPage extends StatelessWidget {
//第一个路由页面
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text('这是第一页'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Text(
'这是第一页',
style: TextStyle(fontSize: 28.0),
),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text('路由示例'),
),
body: Center(
child: Text(
'主页',
style: TextStyle(fontSize: 28.0),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
title: 'appbar 应用按钮',
home: new MyApp(),
));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
actions:
IconButton(
icon: Icon(Icons.search),
tooltip: '搜索',
onPressed: (){
},
),
IconButton(
icon: Icon(Icons.add),
tooltip: '添加',
onPressed: (){
},
),
],
title: Text('appbar 应用按钮示例'),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: Scaffold(body: MyHomePage(),),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageStare createState() => _MyHomePageStare();
}
class _MyHomePageStare extends State
int _selectedIndex = 1;//当前选中的索引
final _widgetOptions = [
Text('index 0:信息'),
Text('Index 1 :通讯录'),
Text('Index 2 :发现'),
];
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text('底部导航'),),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items:
BottomNavigationBarItem(icon: Icon(Icons.chat),title: Text('信息')),
BottomNavigationBarItem(icon: Icon(Icons.contact_phone),title: Text('通讯录')),
BottomNavigationBarItem(icon: Icon(Icons.chat),title: Text('发现')),
],
currentIndex: _selectedIndex,
fixedColor: Colors.deepPurple,
onTap: _onItemTapped,
),
);
}
void _onItemTapped(int index){
setState(() {
_selectedIndex = index ;
});
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: new DefaultTabController(length: items.length,//数量
child: new Scaffold(
appBar: new AppBar(
title: const Text('tabBar选项卡示例'),
bottom: new TabBar(
isScrollable: true,//设置可以滚动
tabs: items.map((ItemView item){//迭代添加子项
return new Tab(
text: item.title,
icon: new Icon(item.icon),
);
}).toList(),
),
),
//添加选项卡视图
body: new TabBarView(children: items.map((ItemView item){
return new Padding(padding: const EdgeInsets.all(16.0),
child: new SelectedView(item:item),
);
}).toList()),
),
),
);
}
}
//视图项数据
class ItemView{
const ItemView({this.title,this.icon});
final String title;
final IconData icon;
}
//选项卡数据
const List
const ItemView(title: '自驾',icon: Icons.directions_car),
const ItemView(title: '自行车',icon: Icons.directions_bike),
const ItemView(title: '轮船',icon: Icons.directions_boat),
const ItemView(title: '公交车',icon: Icons.directions_bus),
const ItemView(title: '火车',icon: Icons.directions_railway),
const ItemView(title: '步行',icon: Icons.directions_walk),
const ItemView(title: '灰机',icon: Icons.flight_land),
const ItemView(title: '跑步',icon: Icons.directions_run),
const ItemView(title: '出租车',icon: Icons.directions_car),
];
//被选中的视图
class SelectedView extends StatelessWidget{
const SelectedView({Key key,this.item}):super(key:key);
//视图数据
final ItemView item;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
// TODO: implement build
return new Card(
color: Colors.white,
child: new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,//垂直方向最小化处理
crossAxisAlignment: CrossAxisAlignment.center,//水平方向居中对齐
children:
new Icon(item.icon,size: 128.0,color: textStyle.color),
new Text(item.title,style: textStyle),
],
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
enum ConferenceItem { AddMember, LockConference, ModifyLayout, TurnoffAll }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'PopupMenuButton 示例',
home: Scaffold(
appBar: AppBar(
title: Text('PopupMenuButton 示例'),
),
body: Center(
child: FlatButton(
onPressed: () {},
child: PopupMenuButton
itemBuilder: (BuildContext context) =>
const PopupMenuItem
value: ConferenceItem.AddMember,
child: Text('添加成员')),
const PopupMenuItem
value: ConferenceItem.LockConference,
child: Text('锁定会议')),
const PopupMenuItem
value: ConferenceItem.ModifyLayout,
child: Text('修改布局')),
const PopupMenuItem
value: ConferenceItem.TurnoffAll,
child: Text('挂断所有')),
])),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'alertdialog 示例',
home: Scaffold(
appBar: AppBar(
title: Text('alertdialog 示例'),
),
body: Center(
child: AlertDialog(
title: Text('提示'),
content: SingleChildScrollView(
child: ListBody(
children:
Text('是否要删除'),
Text('一旦删除数据不可恢复'),
],
),
),
actions:
FlatButton(onPressed: null, child: Text('确定')),
FlatButton(onPressed: null, child: Text('取消')),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final TextEditingController controller = TextEditingController();
controller.addListener((){
print('你输入的内容为:${controller.text}');
});
return MaterialApp(
title: 'TextField 组件示例',
home: Scaffold(
appBar: AppBar(title: Text('TextField 组件示例'),),
body: Center(
child: Padding(padding: const EdgeInsets.all(20.0),child: TextField(
controller: controller,
maxLength: 30,
maxLines: 1,
autocorrect: true,//是否自动更正
autofocus: true,//是否自动对焦
obscureText: false,//是否是密码
textAlign: TextAlign.center,
style: TextStyle(fontSize: 26.0,color: Colors.green),
onChanged: (text){
print('文本内容改变时回调$text');
},
onSubmitted: (text){
print('内容提交时回调$text');
},
enabled: true,//是否禁用
decoration: InputDecoration(
fillColor: Colors.grey.shade200,
filled: true,
helperText: '',
prefixIcon: Icon(Icons.person),
suffixText: '用户名'
),
),),
),
),
);
}
}