底部tabbar 实现
import 'package:flutter/material.dart';
import 'bottom_nav_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'myApp',
home: BottomNavBar(),
);
}
}
import 'package:flutter/material.dart';
import './pages/email_screen.dart';
import './pages/page_screen.dart';
import './pages/play_screen.dart';
import './pages/home_screen.dart';
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
final _BtmNavBarColor = Colors.blue;
int _currentIndex = 0;
List<Widget> pageList = new List();
@override
void initState() {
pageList
..add(HomeScreen())
..add(PageScreen())
..add(EmailScreen())
..add(PlayScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: pageList[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _BtmNavBarColor,
),
title: Text(
'Home',
style: TextStyle(color: _BtmNavBarColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.pages,
color: _BtmNavBarColor,
),
title: Text(
'Pages',
style: TextStyle(color: _BtmNavBarColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _BtmNavBarColor,
),
title: Text(
'Email',
style: TextStyle(color: _BtmNavBarColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _BtmNavBarColor,
),
title: Text(
'AipPlay',
style: TextStyle(color: _BtmNavBarColor),
)),
],
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState((){
_currentIndex= index;
});
},
currentIndex: _currentIndex,
),
);
}
}
页面切换效果实现
import 'package:flutter/material.dart';
import './pages/custom_router.dart';
void main() {
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'my App',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: FirstPage(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text('First Page'),
elevation: 4.0,
leading: Container(),
),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_next,
color: Colors.white,
size: 64.0,
),
onPressed: () {
Navigator.push(context, CustomRoute(SecondPage()));
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pinkAccent,
appBar: AppBar(
title: Text('Second Page'),
elevation: 4.0,
backgroundColor: Colors.pinkAccent,
),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_before,
color: Colors.white,
size: 64.0,
),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
class CustomRoute extends PageRouteBuilder {
final Widget widget;
CustomRoute(this.widget)
: super(
transitionDuration: const Duration(seconds: 1),
pageBuilder: (BuildContext context, Animation<double> animation1,
Animation<double> animation2) {
return widget;
},
transitionsBuilder: (context, Animation<double> animation1,
Animation<double> animation2, child) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
.animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn)),
child: child);
});
}
顶部Tabbar实现
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'my App',
home: KeepAlive(),
);
}
}
class KeepAlive extends StatefulWidget {
@override
_KeepAliveState createState() => _KeepAliveState();
}
class _KeepAliveState extends State<KeepAlive>
with SingleTickerProviderStateMixin {
TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(length: 3, vsync: this);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('tabbar'),
bottom: TabBar(
controller: _controller,
tabs: <Widget>[
Tab(
icon: Icon(Icons.directions_car),
),
Tab(
icon: Icon(Icons.directions_transit),
),
Tab(
icon: Icon(Icons.directions_bike),
),
],
),
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Center(
child: Text('This is Car!'),
),
Center(
child: Text('This is Transit!'),
),
Center(
child: Text('This is Bike!'),
),
],
),
);
}
}
保存状态 缓存页面
import 'package:flutter/material.dart';
class KeepAliveScreen extends StatefulWidget {
@override
_KeepAliveScreenState createState() => _KeepAliveScreenState();
}
class _KeepAliveScreenState extends State<KeepAliveScreen>
with AutomaticKeepAliveClientMixin {
int _counter = 0;
@override
bool get wantKeepAlive => true;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('点一下加1,点一下加1'),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add)),
);
}
}
搜索条实现
import 'package:flutter/material.dart';
import 'package:myapp/pages/assets.dart';
class SearchPage extends StatefulWidget {
@override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('searchPage'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 50.0, 0.0),
onPressed: () {
showSearch(delegate: SearchBar(), context: context);
},
)
],
),
);
}
}
class SearchBar extends SearchDelegate<String> {
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = '';
},
)
];
}
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: transitionAnimation,
),
onPressed: () => close(context, null),
);
}
@override
Widget buildSuggestions(BuildContext context) {
final suggestionList = query.isEmpty
? recentSuggest
: searchList.where((input) {
return input.startsWith(query);
}).toList();
return ListView.builder(
itemCount: suggestionList.length,
itemBuilder: (context, index) {
return ListTile(
title: RichText(
text: TextSpan(
text: suggestionList[index].substring(0, query.length),
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey))
])),
);
});
}
@override
Widget buildResults(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
child: Card(
color: Colors.blueAccent,
child: Center(
child: Text(query),
),
),
);
}
}
添加照片(流式布局)
import 'package:flutter/material.dart';
class WrapDemo extends StatefulWidget {
@override
_WrapDemoState createState() => _WrapDemoState();
}
class _WrapDemoState extends State<WrapDemo> {
List<Widget> boxList = List();
@override
void initState() {
boxList..add(buildButton());
super.initState();
}
Widget buildButton() {
return GestureDetector(
onTap: () {
if (boxList.length < 9) {
print('add');
setState(() {
boxList.insert(boxList.length - 1, buildPicture());
});
}
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 80.0,
height: 80.0,
color: Colors.black54,
child: Icon(Icons.add),
),
),
);
}
Widget buildPicture() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 80,
height: 80,
color: Colors.amber,
child: Center(
child: Text('照片'),
),
),
);
}
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: Text('添加照片'),
),
body: Center(
child: Opacity(
opacity: 0.8,
child: Container(
width: width,
height: height / 2,
color: Colors.grey,
child: Wrap(
children: boxList,
spacing: 26.0,
),
),
),
),
);
}
}
欢迎页
import 'package:flutter/material.dart';
import './home_page.dart';
class AnimationPage extends StatefulWidget {
@override
_AnimationPageState createState() => _AnimationPageState();
}
class _AnimationPageState extends State<AnimationPage>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 3000));
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
super.initState();
_animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => HomePage()),
(route) => route == null);
}
});
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}