PageView 组件
import 'package:flutter/material.dart';
import './routers/routers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: "/",
onGenerateRoute: onGenerateRoute,
);
}
}
//ios风格的路由
import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/dialog.dart';
import '../pages/shop.dart';
import '../pages/pageView.dart';
import '../pages/pageViewBuilder.dart';
import '../pages/pageViewFullPage.dart';
import '../pages/pageViewSwiper.dart';
//1、配置路由
Map routes = {
"/": (contxt) => const Tabs(),
"/dialog": (contxt) => const DialogPage(),
"/pageView": (contxt) => const PageViewPage(),
"/pageViewBuilder": (contxt) => const PageViewBuilderPage(),
"/pageViewFullPage": (contxt) => const PageViewFullPage(),
"/pageViewSwiper": (contxt) => const PageViewSwiper(),
"/shop": (contxt, {arguments}) => ShopPage(arguments: arguments),
};
//2、配置onGenerateRoute 固定写法 这个方法也相当于一个中间件，这里可以做权限判断
var onGenerateRoute = (RouteSettings settings) {
final String? name = settings.name; // /news 或者 /search
final Function? pageContentBuilder =
routes[name]; // Function = (contxt) { return const NewsPage()}
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = CupertinoPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Flutter App")),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
flex: 1,
child: UserAccountsDrawerHeader(
accountName: const Text("itying"),
accountEmail: const Text("itying@qq.com"),
otherAccountsPictures:[
Image.network("https://www.itying.com/images/flutter/1.png"),
Image.network("https://www.itying.com/images/flutter/2.png"),
Image.network("https://www.itying.com/images/flutter/3.png"),
],
currentAccountPicture:const CircleAvatar(
backgroundImage:NetworkImage("https://www.itying.com/images/flutter/3.png")
),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"))),
))
],
),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("个人中心"),
),
const Divider(),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("系统设置"),
),
const Divider(),
],
),
),
endDrawer: const Drawer(
child: Text("右侧侧边栏"),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(() {
_currentIndex = 2;
});
}),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/shop",
arguments: {"title": "shop传值", "aid": 21});
},
child: const Text("命名路由传值")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/dialog");
},
child: const Text("Dialog演示")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageView");
},
child: const Text("PageView演示")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewBuilder");
},
child: const Text("PageViewBuilder演示")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewFullPage");
},
child: const Text("PageView无限加载")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewSwiper");
},
child: const Text("PageViewSwiper")),
],
),
);
}
}
import 'package:flutter/material.dart';
class PageViewPage extends StatefulWidget {
const PageViewPage({super.key});
State<PageViewPage> createState() => _PageViewPageState();
}
class _PageViewPageState extends State<PageViewPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: PageView(
scrollDirection:Axis.vertical, //配置PageView滑动的方向,默认是水平方向
children: [
Center(
child: Text("第1屏",style: Theme.of(context).textTheme.headline1,)
),
Center(
child: Text("第2屏",style: Theme.of(context).textTheme.headline1,)
),
Center(
child: Text("第3屏",style: Theme.of(context).textTheme.headline1,)
),
Center(
child: Text("第4屏",style: Theme.of(context).textTheme.headline1,)
),
Center(
child: Text("第5屏",style: Theme.of(context).textTheme.headline1,)
),
Center(
child: Text("第6屏",style: Theme.of(context).textTheme.headline1,)
),
Center(
child: Text("第7屏",style: Theme.of(context).textTheme.headline1,)
),
],
),
);
}
}
import 'package:flutter/material.dart';
class PageViewBuilderPage extends StatefulWidget {
const PageViewBuilderPage({super.key});
State<PageViewBuilderPage> createState() => _PageViewBuilderPageState();
}
class _PageViewBuilderPageState extends State<PageViewBuilderPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('PageViewBuilder'),
),
body: PageView.builder(
scrollDirection:Axis.vertical, //垂直
itemCount: 10,
itemBuilder: (context, index) {
return Center(
child: Text(
"第${index + 1}屏",
style: Theme.of(context).textTheme.headline1,
));
}),
);
}
}
import 'package:flutter/material.dart';
class PageViewFullPage extends StatefulWidget {
const PageViewFullPage({super.key});
State<PageViewFullPage> createState() => _PageViewFullPageState();
}
class _PageViewFullPageState extends State<PageViewFullPage> {
List<Widget> list = [];
void initState() {
// TODO: implement initState
super.initState();
for (var i = 0; i < 10; i++) {
list.add(
Center(
child: Text(
"第${i + 1}屏",
style: const TextStyle(fontSize: 60),
),
),
);
}
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Full Page'),
),
body: PageView(
scrollDirection: Axis.vertical,
onPageChanged: (index) {
print(index);
if (index + 2 == list.length) {
setState(
() {
for (var i = 0; i < 10; i++) {
list.add(
Center(
child: Text(
"第${i + 1}屏",
style: const TextStyle(fontSize: 60),
),
),
);
}
},
);
}
},
children: list,
),
);
}
}
import 'package:flutter/material.dart';
import '../widget/image.dart';
class PageViewSwiper extends StatefulWidget {
const PageViewSwiper({super.key});
State<PageViewSwiper> createState() => _PageViewSwiperState();
}
class _PageViewSwiperState extends State<PageViewSwiper> {
List<Widget> list = [];
int _currentIndex = 0;
void initState() {
// TODO: implement initState
super.initState();
list = const [
ImagePage(
src: "https://www.itying.com/images/flutter/1.png",
),
ImagePage(
src: "https://www.itying.com/images/flutter/2.png",
),
ImagePage(
src: "https://www.itying.com/images/flutter/3.png",
),
];
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('PageViewSwiper'),
),
body: Stack(
children: [
SizedBox(
height: 200,
child: PageView.builder(
onPageChanged: (index) {
/*
1、刚开始 _currentIndex=0
2、index=1 _currentIndex=1
3、index=2 _currentIndex=2
4、index=3 _currentIndex=0
5、index=4 _currentIndex=1
6、index=5 _currentIndex=2
7、index=6 _currentIndex=0
*/
setState(() {
_currentIndex = index % list.length;
});
},
itemCount: 1000,
itemBuilder: (context, index) {
return list[index % list.length];
// index的值是0-1000
// 0 1 2 0 1 2 0 1 2
},
),
),
Positioned(
left: 0,
right: 0, //设置 left:0 right:0就会站满整行
bottom: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(
list.length,
(index) {
return Container(
margin: const EdgeInsets.all(5),
width: 10,
height: 10,
decoration: BoxDecoration(
color:
_currentIndex == index ? Colors.blue : Colors.grey,
shape: BoxShape.circle //圆
// borderRadius: BorderRadius.circular(5) //圆
),
);
},
).toList(),
),
)
],
),
);
}
}
PageController 自定义 Swiper
import 'package:flutter/material.dart';
import './routers/routers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: "/",
onGenerateRoute: onGenerateRoute,
);
}
}
//ios风格的路由
import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/dialog.dart';
import '../pages/shop.dart';
import '../pages/pageView.dart';
import '../pages/pageViewBuilder.dart';
import '../pages/pageViewFullPage.dart';
import '../pages/pageViewSwiper.dart';
import '../pages/pageViewKeepAlive.dart';
//1、配置路由
Map routes = {
"/": (contxt) => const Tabs(),
"/dialog": (contxt) => const DialogPage(),
"/pageView": (contxt) => const PageViewPage(),
"/pageViewBuilder": (contxt) => const PageViewBuilderPage(),
"/pageViewFullPage": (contxt) => const PageViewFullPage(),
"/pageViewSwiper": (contxt) => const PageViewSwiper(),
"/pageViewKeepAlive": (contxt) => const PageViewKeepAlive(),
"/shop": (contxt, {arguments}) => ShopPage(arguments: arguments),
};
//2、配置onGenerateRoute 固定写法 这个方法也相当于一个中间件，这里可以做权限判断
var onGenerateRoute = (RouteSettings settings) {
final String? name = settings.name; // /news 或者 /search
final Function? pageContentBuilder =
routes[name]; // Function = (contxt) { return const NewsPage()}
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = CupertinoPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Flutter App")),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
flex: 1,
child: UserAccountsDrawerHeader(
accountName: const Text("itying"),
accountEmail: const Text("itying@qq.com"),
otherAccountsPictures:[
Image.network("https://www.itying.com/images/flutter/1.png"),
Image.network("https://www.itying.com/images/flutter/2.png"),
Image.network("https://www.itying.com/images/flutter/3.png"),
],
currentAccountPicture:const CircleAvatar(
backgroundImage:NetworkImage("https://www.itying.com/images/flutter/3.png")
),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"))),
))
],
),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("个人中心"),
),
const Divider(),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("系统设置"),
),
const Divider(),
],
),
),
endDrawer: const Drawer(
child: Text("右侧侧边栏"),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(() {
_currentIndex = 2;
});
}),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/shop",
arguments: {"title": "shop传值", "aid": 21});
},
child: const Text("命名路由传值")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/dialog");
},
child: const Text("Dialog演示")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageView");
},
child: const Text("PageView演示")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewBuilder");
},
child: const Text("PageViewBuilder演示")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewFullPage");
},
child: const Text("PageView无限加载")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewSwiper");
},
child: const Text("PageViewSwiper")),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/pageViewKeepAlive");
},
child: const Text("pageViewKeepAlive")),
],
),
);
}
}
import 'dart:async';
import 'package:flutter/material.dart';
import '../widget/swiper.dart';
class PageViewSwiper extends StatefulWidget {
const PageViewSwiper({super.key});
State<PageViewSwiper> createState() => _PageViewSwiperState();
}
class _PageViewSwiperState extends State<PageViewSwiper> {
List<String> list = [];
void initState() {
// TODO: implement initState
super.initState();
list = const [
"https://www.itying.com/images/flutter/1.png",
"https://www.itying.com/images/flutter/2.png",
"https://www.itying.com/images/flutter/3.png",
];
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('PageViewSwiper'),
),
body:ListView(
children: [
Swiper(list: list)
],
)
);
}
}
import 'dart:async';
import 'package:flutter/material.dart';
class Swiper extends StatefulWidget {
final double width;
final double height;
final List<String> list;
const Swiper(
{super.key,
this.height = 200,
this.width = double.infinity,
required this.list});
State<Swiper> createState() => _SwiperState();
}
class _SwiperState extends State<Swiper> {
int _currentIndex = 0;
List<Widget> pageList = [];
late PageController _pageController;
late Timer timer;
void initState() {
// TODO: implement initState
super.initState();
//数据
for (var i = 0; i < widget.list.length; i++) {
pageList.add(ImagePage(
width: widget.width, height: widget.height, src: widget.list[i]));
}
//PageController
_pageController = PageController(initialPage: 0);
timer = Timer.periodic(const Duration(seconds: 5), (t) {
_pageController.animateToPage((_currentIndex + 1) % pageList.length,
duration: const Duration(milliseconds: 200), curve: Curves.linear);
});
}
void dispose() {
// TODO: implement dispose
super.dispose();
timer.cancel();
_pageController.dispose();
}
Widget build(BuildContext context) {
return Stack(
children: [
SizedBox(
height: 200,
child: PageView.builder(
controller: _pageController,
onPageChanged: (index) {
setState(() {
_currentIndex = index % pageList.length;
});
},
itemCount: 1000,
itemBuilder: (context, index) {
return pageList[index % pageList.length];
// index的值是0-1000
// 0 1 2 0 1 2 0 1 2
}),
),
Positioned(
left: 0,
right: 0, //设置 left:0 right:0就会站满整行
bottom: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(pageList.length, (index) {
return Container(
margin: const EdgeInsets.all(5),
width: 10,
height: 10,
decoration: BoxDecoration(
color: _currentIndex == index ? Colors.blue : Colors.grey,
shape: BoxShape.circle //圆
// borderRadius: BorderRadius.circular(5) //圆
),
);
}).toList(),
))
],
);
}
}
class ImagePage extends StatelessWidget {
final double width;
final double height;
final String src;
const ImagePage(
{super.key,
this.width = double.infinity,
this.height = 200,
required this.src});
Widget build(BuildContext context) {
return SizedBox(
width: width,
height: height,
child: Image.network(
src,
fit: BoxFit.cover,
),
);
}
}
import 'package:flutter/material.dart';
import '../tools/keepAliveWrapper.dart';
class PageViewKeepAlive extends StatefulWidget {
const PageViewKeepAlive({super.key});
State<PageViewKeepAlive> createState() => _PageViewKeepAliveState();
}
class _PageViewKeepAliveState extends State<PageViewKeepAlive> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: PageView.builder(
scrollDirection: Axis.vertical,
itemCount: 10,
itemBuilder: (context, index) {
return KeepAliveWrapper(
//注意：如果页面比较多,缓存会耗费内存 , 注意 注意
child: MyContainer(
num: index,
),
);
},
),
);
}
}
//自定义组件
class MyContainer extends StatefulWidget {
final int num;
const MyContainer({super.key, required this.num});
State<MyContainer> createState() => _MyContainerState();
}
class _MyContainerState extends State<MyContainer> {
Widget build(BuildContext context) {
print(widget.num); //默认数据是没有缓存,每次滑动都会执行build
return Center(
child: Text(
"第${widget.num}屏",
style: Theme.of(context).textTheme.headline1,
));
}
}
import 'package:flutter/material.dart';
class KeepAliveWrapper extends StatefulWidget {
const KeepAliveWrapper(
{Key? key, this.child, this.keepAlive = true})
: super(key: key);
final Widget? child;
final bool keepAlive;
State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}
class _KeepAliveWrapperState extends State<KeepAliveWrapper>
with AutomaticKeepAliveClientMixin {
Widget build(BuildContext context) {
return widget.child!;
}
bool get wantKeepAlive => widget.keepAlive;
}
key,Localkey,Globalkey
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
//父Widget
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey _globalKey = GlobalKey();
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
//1、获取currentState Widget的属性（记住）
var boxState = _globalKey.currentState as _BoxState;
print(boxState._count);
setState(() {
boxState._count++;
});
//调用currentState Widget的方法
boxState.run();
//2、获取子Widget (了解)
var boxWidget = _globalKey.currentWidget as Box;
print(boxWidget
.color); //值：MaterialColor(primary value: Color(0xfff44336))
// 3、获取子组件渲染的属性（了解）
var renderBox =
_globalKey.currentContext!.findRenderObject() as RenderBox;
print(renderBox.size); //值：Size(100.0, 100.0)
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Box(key: _globalKey, color: Colors.red),
),
);
}
}
//子Widget
class Box extends StatefulWidget {
final Color color;
const Box({Key? key, required this.color}) : super(key: key);
State<Box> createState() => _BoxState();
}
class _BoxState extends State<Box> {
int _count = 0;
void run() {
print("我是box的run方法");
}
Widget build(BuildContext context) {
return SizedBox(
height: 100,
width: 100,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(widget.color)),
onPressed: () {
setState(() {
_count++;
});
},
child: Text(
"$_count",
style: Theme.of(context).textTheme.headline2,
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Widget> list = [ //注意：常量没法改变
//1、可以保存状态 2、可以排序
const Box(
key: ValueKey('1'),
color: Colors.red,
),
Box(
key: UniqueKey(), //唯一值 每次运行的时候会随机生成
color: Colors.yellow,
),
const Box(
key: ObjectKey(Box(color: Colors.blue)),
color: Colors.blue
)
];
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.refresh),
onPressed: (){
setState(() {
list.shuffle(); //shuffle:打乱list元素的顺序
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: list,
),
),
);
}
}
class Box extends StatefulWidget {
final Color color;
const Box({Key? key, required this.color}):super(key:key);
State<Box> createState() => _BoxState();
}
class _BoxState extends State<Box> {
int _count = 0;
Widget build(BuildContext context) {
return SizedBox(
height: 100,
width: 100,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(widget.color)),
onPressed: () {
setState(() {
_count++;
});
},
child: Text(
"$_count",
style: Theme.of(context).textTheme.headline2,
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Widget> list = [];
final GlobalKey _globalKey1 = GlobalKey();
final GlobalKey _globalKey2 = GlobalKey();
final GlobalKey _globalKey3 = GlobalKey();
void initState() {
// TODO: implement initState
super.initState();
list = [
//注意：常量没法改变
//1、可以保存状态 2、可以排序
Box(
key: _globalKey1,
color: Colors.red,
),
Box(
key: _globalKey2, //唯一值 每次允许的时候会随机生成
color: Colors.yellow,
),
Box(key: _globalKey3, color: Colors.blue)
];
}
Widget build(BuildContext context) {
print(MediaQuery.of(context).orientation);
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.refresh),
onPressed: () {
setState(() {
list.shuffle(); //shuffle:打乱list元素的顺序
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: MediaQuery.of(context).orientation == Orientation.portrait
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: list,
)
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: list,
),
),
);
}
}
class Box extends StatefulWidget {
final Color color;
const Box({Key? key, required this.color}) : super(key: key);
State<Box> createState() => _BoxState();
}
class _BoxState extends State<Box> {
int _count = 0;
Widget build(BuildContext context) {
return SizedBox(
height: 100,
width: 100,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(widget.color)),
onPressed: () {
setState(() {
_count++;
});
},
child: Text(
"$_count",
style: Theme.of(context).textTheme.headline2,
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
//父Widget
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey _globalKey = GlobalKey();
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
//1、获取currentState Widget的属性（记住）
var boxState = _globalKey.currentState as _BoxState;
print(boxState._count);
setState(() {
boxState._count++;
});
//调用currentState Widget的方法
boxState.run();
//2、获取子Widget (了解)
var boxWidget = _globalKey.currentWidget as Box;
print(boxWidget
.color); //值：MaterialColor(primary value: Color(0xfff44336))
// 3、获取子组件渲染的属性（了解）
var renderBox =
_globalKey.currentContext!.findRenderObject() as RenderBox;
print(renderBox.size); //值：Size(100.0, 100.0)
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Box(key: _globalKey, color: Colors.red),
),
);
}
}
//子Widget
class Box extends StatefulWidget {
final Color color;
const Box({Key? key, required this.color}) : super(key: key);
State<Box> createState() => _BoxState();
}
class _BoxState extends State<Box> {
int _count = 0;
void run() {
print("我是box的run方法");
}
Widget build(BuildContext context) {
return SizedBox(
height: 100,
width: 100,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(widget.color)),
onPressed: () {
setState(() {
_count++;
});
},
child: Text(
"$_count",
style: Theme.of(context).textTheme.headline2,
),
),
);
}
}
AnimatedList 组件
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _globalKey = GlobalKey<AnimatedListState>();
bool flag = true;
List<String> list = ["第一条", "第二条"];
Widget _buildItem(index) {
return ListTile(
key: ValueKey(index),
title: Text(list[index]),
trailing: IconButton(
icon: const Icon(Icons.delete),
onPressed: () {
//执行删除
_deleteItem(index);
},
),
);
}
_deleteItem(index) {
if (flag == true) {
flag = false;
//执行删除
_globalKey.currentState!.removeItem(index, (context, animation) {
//animation的值是从1到0
var removeItem = _buildItem(index);
list.removeAt(index); //数组中删除数据
return ScaleTransition(
// opacity: animation,
scale: animation,
child: removeItem, //删除的时候执行动画的元素
);
});
//解决快速删除的bug
Timer.periodic(
const Duration(milliseconds: 500),
(timer) {
flag = true;
timer.cancel();
},
);
}
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
list.add("我是新增的数据");
_globalKey.currentState!.insertItem(list.length - 1);
},
),
body: AnimatedList(
key: _globalKey,
initialItemCount: list.length,
itemBuilder: ((context, index, animation) {
//animation的值是从0到1
return FadeTransition(
opacity: animation,
child: _buildItem(index),
);
}),
),
);
}
}
Animated 组件
- AnimatedContainer
- AnimatedPadding
- AnimatedOpacity
- AnimatedPositioned
- AnimatedDefaultTextStyle
- AnimatedSwitcher
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag=true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: (){
setState(() {
flag=!flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: AnimatedContainer(
duration: const Duration(seconds: 1,milliseconds: 100),
width: 200,
height: 200,
transform: flag?Matrix4.translationValues(0, 0, 0):Matrix4.translationValues(-100, 0, 0) ,
color: Colors.yellow,
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Stack(
children: [
ListView(
children: const [
ListTile(
title: Text("我是一个列表"),
)
],
),
Positioned(
left: 0,
top: 0,
bottom: 0,
child: AnimatedContainer(
duration: const Duration(seconds: 1, milliseconds: 100),
width: 200,
height: double.infinity,
transform: flag
? Matrix4.translationValues(-200, 0, 0)
: Matrix4.translationValues(0, 0, 0),
color: Colors.yellow,
))
],
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag=true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: (){
setState(() {
flag=!flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: AnimatedPadding(
curve: Curves.bounceInOut,
padding: EdgeInsets.fromLTRB(10, flag?10:500, 0, 0),
duration: const Duration(seconds: 2),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: AnimatedOpacity(
opacity: flag?0.2:1,
duration: const Duration(seconds: 1),
curve: Curves.easeIn,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Stack(
children: [
ListView(
children: const [
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
),
],
),
AnimatedPositioned(
curve: Curves.linear,
right: flag ? 10 : 300,
top: flag ? 10 : 560,
duration: const Duration(seconds: 1, milliseconds: 500),
child: Container(
width: 60,
height: 60,
color: Colors.blue,
)),
],
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Container(
alignment: Alignment.center,
width: 300,
height: 300,
color: Colors.blue,
child: AnimatedDefaultTextStyle(
duration: const Duration(seconds: 1),
style: TextStyle(fontSize: flag ? 20 : 50, color: Colors.black),
child: const Text("你好Flutter"),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Container(
alignment: Alignment.center,
width: 300,
height: 220,
color: Colors.yellow,
child: AnimatedSwitcher(
//当子元素改变的时候会触发动画
duration: const Duration(seconds: 1),
child: flag
? const CircularProgressIndicator()
: Image.network(
"https://www.itying.com/images/flutter/2.png",
fit: BoxFit.cover,
),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Container(
alignment: Alignment.center,
width: 300,
height: 220,
color: Colors.yellow,
child: AnimatedSwitcher(
//当子元素改变的时候会触发动画
transitionBuilder: ((child, animation) {
//可以改变动画效果
return ScaleTransition(
scale: animation,
child: FadeTransition(
opacity: animation,
child: child,
),
);
}),
duration: const Duration(seconds: 1),
child: flag
? const CircularProgressIndicator()
: Image.network(
"https://www.itying.com/images/flutter/2.png",
fit: BoxFit.cover,
),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool flag = true;
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
setState(() {
flag = !flag;
});
},
),
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Container(
alignment: Alignment.center,
width: 300,
height: 220,
color: Colors.yellow,
child: AnimatedSwitcher(
//当子元素改变的时候会触发动画
transitionBuilder: ((child, animation) {
//可以改变动画效果
return ScaleTransition(
scale: animation,
child: FadeTransition(
opacity: animation,
child: child,
),
);
}),
duration: const Duration(seconds: 1),
child: Text(
key: UniqueKey(),
flag ? "你好Flutter" : "你好大地老师",
style: Theme.of(context).textTheme.headline2,
),
),
),
),
);
}
}
Hero 动画
import 'package:flutter/material.dart';
import './routers/routers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
onGenerateRoute: onGenerateRoute,
);
}
}
import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/hero.dart';
final Map<String,Function> routes = {
'/': (contxt) => const Tabs(),
'/hero': (contxt,{arguments}) => HeroPage(arguments:arguments),
};
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
final String? name = settings.name;
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = CupertinoPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1,
// backgroundColor: Colors.red,
title: const Text("Flutter App")
),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
flex: 1,
child: UserAccountsDrawerHeader(
accountName: const Text("itying"),
accountEmail: const Text("itying@qq.com"),
otherAccountsPictures:[
Image.network("https://www.itying.com/images/flutter/1.png"),
Image.network("https://www.itying.com/images/flutter/2.png"),
Image.network("https://www.itying.com/images/flutter/3.png"),
],
currentAccountPicture:const CircleAvatar(
backgroundImage:NetworkImage("https://www.itying.com/images/flutter/3.png")
),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"))),
))
],
),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("个人中心"),
),
const Divider(),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("系统设置"),
),
const Divider(),
],
),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(() {
_currentIndex = 2;
});
}),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
import 'package:flutter/material.dart';
class HeroPage extends StatefulWidget {
final Map arguments;
const HeroPage({super.key, required this.arguments});
State<HeroPage> createState() => _HeroPageState();
}
class _HeroPageState extends State<HeroPage> {
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Hero(
tag: widget.arguments["imageUrl"],
child: Scaffold(
backgroundColor: Colors.black,
body: Center(
child: AspectRatio(
aspectRatio: 16 / 9,
child:
Image.network("https://www.itying.com/images/flutter/2.png"),
),
),
),
),
);
}
}
import 'package:flutter/material.dart';
import '../../res/listData.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Widget> _getListData() {
var tempList = listData.map((value) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(context, "/hero",
arguments: {"imageUrl": value['imageUrl']});
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
child: Column(
children: <Widget>[
Hero(tag: value['imageUrl'], child: Image.network(value['imageUrl'])),
const SizedBox(height: 10),
Text(
value['title'],
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 16),
)
],
),
),
);
});
return tempList.toList();
}
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 10.0, //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
padding: const EdgeInsets.all(10),
crossAxisCount: 2, //一行的 Widget 数量
// childAspectRatio:0.7, //宽度和高度的比例
children: _getListData(),
);
}
}
Hero 与 PageView 结合使用
import 'package:flutter/material.dart';
import './routers/routers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
onGenerateRoute: onGenerateRoute,
);
}
}
import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/hero.dart';
final Map<String,Function> routes = {
'/': (contxt) => const Tabs(),
'/hero': (contxt,{arguments}) => HeroPage(arguments:arguments),
};
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
final String? name = settings.name;
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = CupertinoPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1,
// backgroundColor: Colors.red,
title: const Text("Flutter App")),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
flex: 1,
child: UserAccountsDrawerHeader(
accountName: const Text("itying"),
accountEmail: const Text("itying@qq.com"),
otherAccountsPictures: [
Image.network(
"https://www.itying.com/images/flutter/1.png"),
Image.network(
"https://www.itying.com/images/flutter/2.png"),
Image.network(
"https://www.itying.com/images/flutter/3.png"),
],
currentAccountPicture: const CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png")),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"))),
))
],
),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("个人中心"),
),
const Divider(),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("系统设置"),
),
const Divider(),
],
),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(() {
_currentIndex = 2;
});
}),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
import 'package:flutter/material.dart';
import '../../res/listData.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Widget> _getListData() {
var tempList = listData.map((value) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(context, "/hero", arguments: {
"imageUrl": value['imageUrl'],
"initialPage": value['id'],
"listData": listData,
});
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
child: Column(
children: <Widget>[
Hero(
tag: value['imageUrl'],
child: Image.network(value['imageUrl'])),
const SizedBox(height: 10),
Text(
value['title'],
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 16),
)
],
),
),
);
});
return tempList.toList();
}
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 10.0, //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
padding: const EdgeInsets.all(10),
crossAxisCount: 2, //一行的 Widget 数量
// childAspectRatio:0.7, //宽度和高度的比例
children: _getListData(),
);
}
}
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view_gallery.dart';
class HeroPage extends StatefulWidget {
final Map arguments;
const HeroPage({super.key, required this.arguments});
State<HeroPage> createState() => _HeroPageState();
}
class _HeroPageState extends State<HeroPage> {
List listData = [];
late int currentPage;
int initialPage = 0;
void initState() {
super.initState();
listData = widget.arguments["listData"];
initialPage = widget.arguments["initialPage"] - 1;
currentPage = widget.arguments["initialPage"];
}
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Hero(
tag: widget.arguments["imageUrl"],
child: Stack(
children: [
Scaffold(
backgroundColor: Colors.black,
body: Center(
child: PhotoViewGallery.builder(
itemCount: listData.length,
pageController: PageController(initialPage: initialPage),
onPageChanged: (index) {
print(index);
setState(() {
currentPage = index + 1;
});
},
builder: ((context, index) {
return PhotoViewGalleryPageOptions(
imageProvider:
NetworkImage(listData[index]["imageUrl"]));
}),
),
),
),
Positioned(
left: 0,
right: 0,
bottom: 20,
child: Container(
alignment: Alignment.center,
child: Text(
"$currentPage/${listData.length}",
style: const TextStyle(
color: Colors.white,
fontSize: 16,
decoration: TextDecoration.none),
),
),
)
],
),
),
);
}
}
GestureDetector 组件
- GestureDetector 组件可以监听屏幕上的各种手势事件，比如点击、双击、长按、滑动等。
表单组件
- TextField， CheckBox， Radio， Switch, CheckBoxListTile， RadioListTile， SwitchListTile
import 'package:flutter/material.dart';
import './routers/routers.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
onGenerateRoute: onGenerateRoute,
);
}
}
import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/checkbox.dart';
import '../pages/radio.dart';
import '../pages/switch.dart';
import '../pages/textfield.dart';
import '../pages/login.dart';
import '../pages/checkboxListTile.dart';
final Map<String, Function> routes = {
'/': (contxt) => const Tabs(),
'/checkbox': (contxt) => const CheckboxPage(),
'/checkboxListTile': (contxt) => const CheckboxListTilePage(),
'/radio': (contxt) => const RadioPage(),
'/switch': (contxt) => const SwitchPage(),
'/textfield': (contxt) => const TextFieldPage(),
'/login': (contxt) => const LoginPage(),
};
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
final String? name = settings.name;
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = CupertinoPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1,
// backgroundColor: Colors.red,
title: const Text("Flutter App")),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
flex: 1,
child: UserAccountsDrawerHeader(
accountName: const Text("itying"),
accountEmail: const Text("itying@qq.com"),
otherAccountsPictures: [
Image.network(
"https://www.itying.com/images/flutter/1.png"),
Image.network(
"https://www.itying.com/images/flutter/2.png"),
Image.network(
"https://www.itying.com/images/flutter/3.png"),
],
currentAccountPicture: const CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png")),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"))),
))
],
),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("个人中心"),
),
const Divider(),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("系统设置"),
),
const Divider(),
],
),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(() {
_currentIndex = 2;
});
}),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/textfield");
},
child: const Text("文本框")),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/login");
},
child: const Text("login演示")),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/radio");
},
child: const Text("radio")),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/checkbox");
},
child: const Text("checkbox")),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/checkboxListTile");
},
child: const Text("CheckboxListTile")),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/switch");
},
child: const Text("switch")),
],
),
);
}
}
import 'package:flutter/material.dart';
class TextFieldPage extends StatefulWidget {
const TextFieldPage({super.key});
State<TextFieldPage> createState() => _TextFieldPageState();
}
class _TextFieldPageState extends State<TextFieldPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TextField'),
),
body: ListView(
padding: const EdgeInsets.all(10),
children: [
const TextField(),
const SizedBox(height: 20),
const TextField(
decoration: InputDecoration(border: OutlineInputBorder())),
const SizedBox(height: 20),
const TextField(
decoration: InputDecoration(
hintText: "请输入用户名", border: OutlineInputBorder())),
const SizedBox(height: 20),
const TextField(
obscureText: true, //配置密码框
decoration: InputDecoration(
hintText: "请输入密码", border: OutlineInputBorder())),
const SizedBox(height: 20),
TextField(
decoration: InputDecoration(
hintText: "请输入密码",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
))),
const SizedBox(height: 20),
const TextField(
decoration: InputDecoration(
icon: Icon(Icons.add),
hintText: "请输入网址",
prefixText: "http://",
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder())),
const SizedBox(height: 20),
const TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.people),
hintText: "请输入用户名",
border: OutlineInputBorder()),
),
const SizedBox(height: 10),
const TextField(
obscureText: true,
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
hintText: "请输入密码",
border: OutlineInputBorder()),
),
const SizedBox(height: 20),
const TextField(
decoration: InputDecoration(
suffixIcon: Icon(Icons.close),
hintText: "请输入关键词",
border: OutlineInputBorder()),
),
const SizedBox(height: 20),
const TextField(
maxLines: 4,
decoration: InputDecoration(border: OutlineInputBorder()),
)
],
),
);
}
}
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
late TextEditingController _usernameController;
String username = "";
String password = "";
void initState() {
// TODO: implement initState
super.initState();
//初始化的时候给用户名赋值
_usernameController =
TextEditingController.fromValue(const TextEditingValue(
text: "zhangsan",
// selection:
// TextSelection.fromPosition(TextPosition(offset: username.length))
));
}
void dispose() {
// TODO: implement dispose
super.dispose();
_usernameController.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: ListView(
padding: const EdgeInsets.all(10),
children: [
TextField(
controller: _usernameController,
onChanged: (value) {
setState(
() {
username = value;
},
);
},
decoration: const InputDecoration(
prefixIcon: Icon(Icons.people),
hintText: "请输入用户名",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 10),
TextField(
onChanged: (value) {
setState(
() {
password = value;
},
);
},
obscureText: true, //密码框
decoration: const InputDecoration(
prefixIcon: Icon(Icons.lock),
hintText: "请输入密码",
border: OutlineInputBorder(),
),
),
const SizedBox(height: 40),
Padding(
padding: const EdgeInsets.fromLTRB(40, 0, 40, 0),
child: ElevatedButton(
onPressed: () {
print(username);
print(password);
},
child: const Text("登录"),
),
),
Text("$username $password")
],
),
);
}
}
import 'package:flutter/material.dart';
class RadioPage extends StatefulWidget {
const RadioPage({super.key});
State<RadioPage> createState() => _RadioPageState();
}
class _RadioPageState extends State<RadioPage> {
int sex = 1;
int flag = 1;
_onChanged(value) {
setState(() {
sex = value;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Radio"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("男:"),
Radio(
value: 1,
groupValue: sex,
onChanged: (value) {
setState(() {
sex = value as int;
});
}),
const SizedBox(width: 20),
const Text("女:"),
Radio(value: 2, groupValue: sex, onChanged: _onChanged)
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(sex == 1 ? "男" : "女")],
),
const SizedBox(height: 20),
const Text("是否已进行核酸检测"),
Column(
children: [
RadioListTile(
title: const Text("已完成核酸"),
value: 1,
groupValue: flag,
onChanged: (value) {
setState(() {
flag = value as int;
});
}),
RadioListTile(
title: const Text("未完成核酸"),
value: 2,
groupValue: flag,
onChanged: (value) {
setState(() {
flag = value as int;
});
})
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text(flag == 1 ? "已完成" : "未完成")],
),
],
),
);
}
}
import 'package:flutter/material.dart';
class SwitchPage extends StatefulWidget {
const SwitchPage({super.key});
State<SwitchPage> createState() => _SwitchPageState();
}
class _SwitchPageState extends State<SwitchPage> {
bool flag = true; //注意位置
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SwitchPage'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Switch(
value: flag,
onChanged: (value) {
setState(() {
flag = value;
});
}),
const SizedBox(height: 40),
Text(flag ? "true" : "false")
],
),
),
);
}
}
import 'package:flutter/material.dart';
class CheckboxPage extends StatefulWidget {
const CheckboxPage({super.key});
State<CheckboxPage> createState() => _CheckboxPageState();
}
class _CheckboxPageState extends State<CheckboxPage> {
bool flag = true;
final List _hobby = [
{"checked": true, "title": "吃饭"},
{"checked": false, "title": "睡觉"},
{"checked": true, "title": "写代码"}
];
List<Widget> _initHobby() {
List<Widget> tempList = [];
for (var i = 0; i < _hobby.length; i++) {
tempList.add(
Row(
children: [
Text("${_hobby[i]["title"]}"),
Checkbox(
value: _hobby[i]["checked"],
onChanged: (value) {
setState(() {
_hobby[i]["checked"] = value;
});
})
],
),
);
}
return tempList;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Checkbox'),
),
body: ListView(
padding: const EdgeInsets.all(10),
children: [
Checkbox(
value: flag,
onChanged: (value) {
setState(() {
flag = value!;
});
}),
Text(flag ? "已选中" : "未选中"),
const SizedBox(height: 40),
const Divider(),
const SizedBox(height: 40),
Text(
"爱好:",
style: Theme.of(context).textTheme.headline6,
),
Column(
children: _initHobby(),
),
const SizedBox(height: 40),
ElevatedButton(
onPressed: () {
print(_hobby);
},
child: const Text("获取值"))
],
),
);
}
}
import 'package:flutter/material.dart';
class CheckboxListTilePage extends StatefulWidget {
const CheckboxListTilePage({super.key});
State<CheckboxListTilePage> createState() => _CheckboxListTilePageState();
}
class _CheckboxListTilePageState extends State<CheckboxListTilePage> {
final List _hobby = [
{"checked": true, "title": "吃饭"},
{"checked": false, "title": "睡觉"},
{"checked": true, "title": "写代码"}
];
List<Widget> _initHobby() {
List<Widget> tempList = [];
for (var i = 0; i < _hobby.length; i++) {
tempList.add(
CheckboxListTile(
title: Text(_hobby[i]["title"]),
value: _hobby[i]["checked"],
onChanged: (value) {
setState(() {
_hobby[i]["checked"] = value;
});
},
),
);
}
return tempList;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: ListView(
children: [
Text(
"爱好:",
style: Theme.of(context).textTheme.headline6,
),
Column(
children: _initHobby(),
),
const SizedBox(height: 40),
ElevatedButton(
onPressed: () {
print(_hobby);
},
child: const Text("获取值"),
)
],
),
);
}
}
异步
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircularProgressIndicator(),
SizedBox(height: 20),
CircularProgressIndicator(
backgroundColor: Colors.grey,
valueColor: AlwaysStoppedAnimation(Colors.red),
),
SizedBox(height: 20),
LinearProgressIndicator(),
SizedBox(height: 20),
LinearProgressIndicator(
backgroundColor: Colors.green,
valueColor: AlwaysStoppedAnimation(Colors.black),
),
SizedBox(height: 20),
LinearProgressIndicator(
value: 0.56,
backgroundColor: Colors.green,
valueColor: AlwaysStoppedAnimation(Colors.red),
),
SizedBox(height: 20),
LinearProgressIndicator(
value: 0.86,
backgroundColor: Colors.green,
valueColor: AlwaysStoppedAnimation(Colors.red),
),
SizedBox(
height: 20,
),
// 注意需要引入：import 'package:flutter/cupertino.dart';
CupertinoActivityIndicator(),
SizedBox(height: 20),
CupertinoActivityIndicator(
radius: 20,
),
],
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Future Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Flutter中要同时要执行多个任务就可以使用异步
Future<String> getStringNum() {
return Future(() {
//执行统计任务
var num = 0;
for (var i = 0; i < 10000; i++) {
num += i;
}
return "result:$num";
});
}
int _counter = 0;
void _incrementCounter() async {
getStringNum().then((value) {
print(value);
});
print("---执行--");
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Future Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Flutter中要同时要执行多个任务就可以使用异步
Future<String> getStringNum() {
// 1、Future.value:返回一个指定值的Future
// return Future.value("你好Future");
// 2、Future.delayed 返回一个延时执行的Future
// return Future.delayed(const Duration(seconds: 3), () {
// return "你好Future";
// });
// 3、返回异步的function （用的最多）
// return Future((){
// return "你好Future";
// });
// 4、抛出异常
return Future(() {
return Future.error(Exception("this is error"));
});
}
int _counter = 0;
void _incrementCounter() async {
getStringNum().then((value) {
print(value);
}).catchError((err) {
print(err);
}).whenComplete(() {
print("完成");
});
print("---执行--");
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Future Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//Flutter中要同时要执行多个任务就可以使用异步
Future<int> getNum() {
return Future(() {
return 123;
});
}
void _incrementCounter() async {
getNum().then((value) {
return value * 2;
}).then((value) {
print(value);
}).catchError((err) {
print(err);
}).whenComplete(() {
print("完成");
});
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Future Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//Flutter中要同时要执行多个任务就可以使用异步
Future<int> getNum() {
print("getNum执行");
return Future.delayed(const Duration(seconds: 2), () {
return 123;
});
}
// async:表示把一个方法定成异步
// await:把异步改为同步 ,必须用在async的方法中
void _incrementCounter() async {
var result = await getNum(); //把异步改为同步
print(result);
print("执行");
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Future Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required this.title}) : super(key: key);
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//Flutter 中要同时要执行多个任务就可以使用异步
Future<int> getNum() {
return Future.error(Exception("this is error"));
}
// async:表示把一个方法定成异步
// await:把异步改为同步 ,必须用在async的方法中
void _incrementCounter() async {
try {
var result = await getNum(); //把异步改为同步
print(result);
} catch (e) {
print(e);
}
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
FetureBuilder StreamBuilder
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Future<String> loadData() async {
await Future.delayed(const Duration(seconds: 3));
// throw "this is error"; //模拟错误
return "你好我是远程数据";
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: FutureBuilder(
future: loadData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Text("Error:${snapshot.error}");
} else {
return Text("${snapshot.data}");
}
} else {
return const CircularProgressIndicator();
}
},
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Future<String> loadData() async {
await Future.delayed(const Duration(seconds: 3));
// throw "this is error"; //模拟错误
return "你好我是远程数据";
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: FutureBuilder(
future: loadData(),
initialData: "我是初始化的数据",
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text("error:${snapshot.error}");
} else {
return Text("Data:${snapshot.data}");
}
}),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//只会返回一个数据, Future在未来只会获取一个值
Future<String> loadData() async {
return "this is Future";
}
//定义一个异步流
Stream<int> loadStreamData() {
// return Stream.periodic(Duration(seconds: 1),(_)=>42);
return Stream.periodic(const Duration(seconds: 1), (v) => v);
}
void initState() {
//获取异步方法Future里面的数据
loadData().then((value) => print(value));
//获取异步流里面的数据
loadStreamData().listen((event) {
print(event);
});
// TODO: implement initState
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: const Center(
child: Text("你好FLutter"),
),
);
}
}
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//定义一个异步流
Stream<int> loadStreamData() {
return Stream.periodic(const Duration(seconds: 1), (v) {
if (Random().nextBool()) {
//生成一个随机的true或者false
return v;
}
throw "this is error";
});
}
void initState() {
// TODO: implement initState
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: StreamBuilder(
stream: loadStreamData(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return const Text("没有数据流");
case ConnectionState.waiting:
return const Text("加载中");
case ConnectionState.active:
if (snapshot.hasError) {
return Text("error:${snapshot.error}");
} else {
return Text(
"${snapshot.data}",
style: Theme.of(context).textTheme.headline1,
);
}
case ConnectionState.done:
return const Text("已完成done");
default:
throw "没有别的状态";
}
}),
),
);
}
}
DateTime showDatePicker
import 'package:flutter/material.dart';
import './routers/routers.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
centerTitle: true,
)),
initialRoute: "/showDatePicker",
onGenerateRoute: onGenerateRoute,
//配置国际化
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: const [
Locale('zh', 'CH'),
Locale('en', 'US'),
],
);
}
}
import 'package:flutter/cupertino.dart';
import '../pages/tabs.dart';
import '../pages/dateTime.dart';
import '../pages/showDatePicker.dart';
//1、配置路由
Map routes = {
"/": (contxt) => const Tabs(),
"/dateTime": (contxt) => const DateTimePage(),
"/showDatePicker": (contxt) => const ShowDateTimePickerPage(),
};
//2、配置onGenerateRoute 固定写法 这个方法也相当于一个中间件，这里可以做权限判断
var onGenerateRoute = (RouteSettings settings) {
final String? name = settings.name; // /news 或者 /search
final Function? pageContentBuilder =
routes[name]; // Function = (contxt) { return const NewsPage()}
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = CupertinoPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
final int index;
const Tabs({super.key, this.index = 0});
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
late int _currentIndex;
void initState() {
// TODO: implement initState
super.initState();
_currentIndex = widget.index;
}
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Flutter App")),
drawer: Drawer(
child: Column(
children: [
Row(
children: [
Expanded(
flex: 1,
child: UserAccountsDrawerHeader(
accountName: const Text("itying"),
accountEmail: const Text("itying@qq.com"),
otherAccountsPictures: [
Image.network(
"https://www.itying.com/images/flutter/1.png"),
Image.network(
"https://www.itying.com/images/flutter/2.png"),
Image.network(
"https://www.itying.com/images/flutter/3.png"),
],
currentAccountPicture: const CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png")),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://www.itying.com/images/flutter/2.png"),
),
),
),
)
],
),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.people),
),
title: Text("个人中心"),
),
const Divider(),
const ListTile(
leading: CircleAvatar(
child: Icon(Icons.settings),
),
title: Text("系统设置"),
),
const Divider(),
],
),
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(
() {
_currentIndex = 2;
},
);
},
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/dateTime");
},
child: const Text("日期演示")),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/showDatePicker");
},
child: const Text("showDatePicker弹出日期")),
],
),
);
}
}
import 'package:flutter/material.dart';
class DateTimePage extends StatefulWidget {
const DateTimePage({super.key});
State<DateTimePage> createState() => _DateTimePageState();
}
class _DateTimePageState extends State<DateTimePage> {
void initState() {
super.initState();
// 1、获取日期
// DateTime d=DateTime.now();
// print(d);
// var str="${d.year}-${d.month}-${d.day} ${d.hour}:${d.minute}:${d.second}";
// print(str);
// 2、获取时间戳
// DateTime d=DateTime.now();
// print(d.millisecondsSinceEpoch);
// 3、日期转换成时间戳 时间戳转换成日期
// DateTime dateTime = DateTime.now();
// int time = dateTime.millisecondsSinceEpoch; //时间戳
// DateTime d = DateTime.fromMillisecondsSinceEpoch(time); //时间戳转换成日期
// var str = "${d.year}-${d.month}-${d.day} ${d.hour}:${d.minute}:${d.second}";
// print(str);
// 4、日期字符串转换成时间
// String str="2023-08-01";
// DateTime d=DateTime.parse(str);
// print(d);
// print(d.millisecondsSinceEpoch);
// print(DateTime.parse("2021-08-01 12:01:30"));
// DateTime d =DateTime(2030,3,24);
// print(d);
// print(d.millisecondsSinceEpoch);
// 5、时间加减
// DateTime d =DateTime.now();
// print(d);
// print(d.add(const Duration(days: 5)));
// print(d.add(const Duration(minutes: 5)));
// print(d.add(const Duration(minutes: -5)));
// 6、TimeOfDay获取当然的时间
TimeOfDay time = TimeOfDay.now();
print(time);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: const Center(
child: Text("日期 时间戳 时间 演示 请查看控制台"),
),
);
}
}
import 'package:flutter/material.dart';
class ShowDateTimePickerPage extends StatefulWidget {
const ShowDateTimePickerPage({super.key});
State<ShowDateTimePickerPage> createState() => _ShowDateTimePickerPageState();
}
class _ShowDateTimePickerPageState extends State<ShowDateTimePickerPage> {
late DateTime _dateTime = DateTime.now();
late TimeOfDay _time = TimeOfDay.now();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("${_dateTime.year}-${_dateTime.month}-${_dateTime.day}"),
const Icon(Icons.arrow_drop_down)
],
),
onTap: () async {
DateTime? d = await showDatePicker(
context: context,
initialDate: _dateTime,
firstDate: DateTime(1990, 1, 1),
lastDate: DateTime(2035, 1, 1));
if (d != null) {
setState(() {
_dateTime = d;
});
}
},
),
const SizedBox(height: 40),
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("${_time.hour}-${_time.minute}"),
const Icon(Icons.arrow_drop_down)
],
),
onTap: () async {
TimeOfDay? timeDay =
await showTimePicker(context: context, initialTime: _time);
setState(() {
_time = timeDay!;
});
},
)
],
),
),
);
}
}