手勢處理
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),
),
);
}
}
運行效果: