手势处理
GestureDetector Class
void main() => runApp(MaterialApp(
title: "手势处理示例",
home: MyApp(),
));
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new GestureDetector(
onTap: () {
final snackBar = new SnackBar(content: new Text("按钮被按下"));
Scaffold.of(context).showSnackBar(snackBar);
},
child: new Container(
decoration: new BoxDecoration(
color: Theme.of(context).buttonColor,
borderRadius: new BorderRadius.circular(10)),
child: new Text("测试按钮"),
),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("手势处理示例"),
),
body: new Center(child: new MyButton()));
}
}
运行效果:
滑动删除手势
DIsmissible class
void main() => runApp(MaterialApp(
title: "滑动删除手势处理示例",
home: MyApp(),
));
class MyApp extends StatelessWidget {
final List<String> items =
new List<String>.generate(30, (i) => "列表项${i + 1}");
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("滑动删除手势处理示例"),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return new Dismissible(
key: new Key(item),
onDismissed: (direction) {
items.removeAt(index);
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text("$item 被删除了")));
},
child: new ListTile(
title: new Text('$item'),
));
}));
}
}
运行效果:
图片资源和字体资源
child: Image.asset(
"images/2.jpg",
scale: 1,
),
自定义字体
void main() => runApp(MaterialApp(
title: "自定义字体",
home: MyApp(),
));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("自定义字体"),
),
body: new Center(
child: new Text(
"自定义字体",
style: new TextStyle(fontFamily: 'myfont', fontSize: 20),
),
));
}
}
运行效果:
工程的资源配置文件,要注意格式,在放开某项资源注释后,注意删除资源类别前的空格,否则会包如下错误:
页面跳转
MaterialPageRoute < T > class
压栈方法 Navigator.push
出栈方法 Navigator.pop
构建目标页面 MaterialPageRoute
void main() => runApp(MaterialApp(
title: "导航页面示例",
home: FirstScreen(),
));
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("导航页面示例"),
),
body: new Center(
child: new RaisedButton(
child: new Text("打开商品详情页面"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SecondScreen()));
})));
}
}
class SecondScreen 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: () {
Navigator.pop(context);
},
child: new Text("返回页面"),
),
),
);
}
}
运行效果:
页面跳转发送数据
class Product {
final String title;
final String description;
Product(this.title, this.description);
}
void main() => runApp(MaterialApp(
title: "页面跳转发送数据示例",
home: new ProductList(
products: new List.generate(
20, (i) => new Product('商品 $i', '这是一个商品详情 $i')))));
class ProductList extends StatelessWidget {
final List<Product> products;
ProductList({Key key, @required this.products}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('商品列表'),
),
body: new ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return new ListTile(
title: new Text(products[index].title),
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
new ProductDetail(product: products[index])));
},
);
}),
);
}
}
class ProductDetail extends StatelessWidget {
final Product product;
ProductDetail({Key key, @required this.product}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: new Text("${product.title}"),
),
body: new Padding(
padding: new EdgeInsets.all(10),
child: new Text('${product.description}'),
),
);
}
}
运行效果:
页面跳转返回数据
void main() => runApp(MaterialApp(title: "页面跳转返回数据示例", home: FirstPage()));
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('页面跳转返回数据示例'),
),
body: new Center(
child: new RouteButton(),
));
}
}
class RouteButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new RaisedButton(
onPressed: () {
_navigateToScreenPage(context);
},
child: new Text('选择一个选项,任意选项'),
);
}
_navigateToScreenPage(BuildContext context) async {
final result = await Navigator.push(
context, new MaterialPageRoute(builder: (context) => new SecondPage()));
Scaffold.of(context)
.showSnackBar(new SnackBar(content: new Text('$result')));
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('选择一条数据'),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
onPressed: () {
Navigator.pop(context, 'ooooo');
},
child: new Text('ooooo'),
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
onPressed: () {
Navigator.pop(context, 'fffff');
},
child: new Text('fffff'),
),
),
],
)));
}
}
运行效果:
页面跳转动画
hero class
void main() => runApp(MaterialApp(title: "页面切换动画", home: FirstPage()));
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('页面切换动画'),
),
body: new GestureDetector(
child: new Center(
child: new Hero(
tag: '第一张图片',
child: new Image.asset(
"images/2.jpg",
scale: 1,
)),
),
onTap: () {
Navigator.push(context, new MaterialPageRoute(builder: (_) {
return new SecondPage();
}));
},
));
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第二张图片'),
),
body: new GestureDetector(
child: new Center(
child: new Hero(
tag: "第二张图片",
child: new Image.asset(
'images/7.jpg',
scale: 1,
)),
),
onTap: () {
Navigator.pop(context);
},
));
}
}
运行效果:
动画
AnimatedOpacity class
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = "flutter 动画详解";
return new MaterialApp(
title: appTitle,
home: new MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key key, this.title}) : super(key: key);
@override
State<StatefulWidget> createState() {
return new _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool _visible = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: new Duration(milliseconds: 500),
child: new Container(
width: 300,
height: 300,
color: Colors.deepOrange,
),
),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
setState(() {
_visible = !_visible;
});
},
tooltip: '显示隐藏',
child: new Icon(Icons.adb),
),
);
}
}
运行效果: