一、 轮播图
- 添加依赖：Add this to your package's pubspec.yaml file:
dependencies:
flutter_swiper: ^1.1.6
- 获取资源
$ flutter pub get
- 使用的时候导入
import 'package:flutter_swiper/flutter_swiper.dart';
- demo
class _KnowledgePage extends State<KnowledgePage> {
List<String> imgs = [
"http://ww4.sinaimg.cn/large/7a8aed7bjw1exp4h479xfj20hs0qoq6t.jpg",
"http://ww1.sinaimg.cn/large/0065oQSqly1frepozc5taj30qp0yg7aq.jpg",
"http://ww1.sinaimg.cn/large/0065oQSqly1frept5di16j30p010g0z9.jpg"
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 180,
child: Swiper(
autoplay: true,
pagination: SwiperPagination(),//添加indicator
itemCount: imgs.length,
itemBuilder: (BuildContext context, int index) {
return Image.network(
imgs[index],
fit: BoxFit.cover,
);
},
),
),
);
}
}
二、 延迟
Future.delayed(Duration(seconds: 3), () {//操作});
三、 Flutter导航页之intro_slider
- intro_slider是Flutter一个应用启动欢迎页面的插件，可以帮助你介绍你的应用，以显示你的应用程序的主要功能， 你可以更改图像，按钮，文本样式，颜色等，创建介绍屏幕从未如此简单快捷。
- 目前官方版本是intro_slider ^2.3.1
- intro_slider插件地址
①添加依赖intro_slider: ^2.3.1
②使用IntroSlider
class SplashScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _SplashScreen();
}
}
class _SplashScreen extends State<SplashScreen> {
List<Slide> slides = new List();
//完成方法
void onDonePress() {
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => MainScreen()),
(route) => route == null);
}
//跳过方法
void onSkipPress() {
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => MainScreen()),
(route) => route == null);
}
@override
Widget build(BuildContext context) {
return IntroSlider(
slides: slides,
onDonePress: this.onDonePress,
onSkipPress: this.onSkipPress,
nameSkipBtn: "跳过",
nameNextBtn: "下一页",
nameDoneBtn: "进入",
);
}
}
③获取slider集合
slides.add(
new Slide(
title: "Flutter",
description:
"Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。",
styleDescription: TextStyle(
color: Colors.white, fontSize: 20.0),
marginDescription:
EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
colorBegin: Color(0xffFFDAB9),
colorEnd: Color(0xff40E0D0),
directionColorBegin: Alignment.topLeft,
directionColorEnd: Alignment.bottomRight,
),
);
slides.add(
new Slide(
title: "Wanandroid",
description:
"这是一款使用Flutter写的WanAndroid客户端应用，在Android和IOS都完美运行,可以用来入门Flutter，简单明了，适合初学者,项目完全开源，如果本项目确实能够帮助到你学习Flutter，谢谢start，有问题请提交Issues,我会及时回复。",
styleDescription: TextStyle(
color: Colors.white, fontSize: 20.0, fontFamily: 'Raleway'),
marginDescription:
EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
colorBegin: Color(0xffFFFACD),
colorEnd: Color(0xffFF6347),
directionColorBegin: Alignment.topLeft,
directionColorEnd: Alignment.bottomRight,
),
);
slides.add(
new Slide(
title: "Welcome",
description: "赠人玫瑰，手有余香；\n分享技术，传递快乐。",
styleDescription: TextStyle(
color: Colors.white, fontSize: 20.0, fontFamily: 'Raleway'),
marginDescription:
EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
colorBegin: Color(0xffFFA500),
colorEnd: Color(0xff7FFFD4),
directionColorBegin: Alignment.topLeft,
directionColorEnd: Alignment.bottomRight,
),
);
四、获取到数据前红色报错界面处理
1、思路
state生命周期setState -- 在网络数据得到之前添加一个loading框即可
2、解决：
class LoadingUtil {
static Widget loading() {
return Center(
child: CircularProgressIndicator(
strokeWidth: 2.0,
),
);
}
}
五、Flutter中webview
1. 添加依赖
flutter_webview_plugin: ^0.3.4
2.使用
class _WebViewScreen extends State<WebViewScreen> {
@override
Widget build(BuildContext context) {
var title = widget.title;
var url = widget.url;
return WebviewScaffold(
url: url,
appBar: AppBar(
title: title,
),
);
}
}
六、列表刷新
1. 添加依赖
pull_to_refresh: ^1.5.4
2.获取刷新控制器
initialRefresh: false首次是否刷新
RefreshController _refreshController =
new RefreshController(initialRefresh: false);
3.获取或者刷新文章列表
记得关闭刷新控件
void getArticleList() async {
_page = 0;
await ApiService().getSquareList(_page).then((value) {
var data = json.decode(value.toString());
_refreshController.refreshCompleted();
setState(() {
ArticleModel _articleModel = ArticleModel.fromJson(data);
_articles = _articleModel.data.datas;
});
});
}
4. 获取更多文章列表
记得关闭加载更多控件
getMoreSquareList() async {
_page++;
await ApiService().getSquareList(_page).then((value) {
var data = json.decode(value.toString());
_refreshController.loadComplete();
setState(() {
ArticleModel _articleModel = ArticleModel.fromJson(data);
_articles.addAll(_articleModel.data.datas);
});
});
}
5.构建页面的时候添加刷新控件
@override
Widget build(BuildContext context) {
if (_articles.length <= 0) return LoadingUtil.loading();
return SmartRefresher(
enablePullDown: true,
enablePullUp: true,
header: MaterialClassicHeader(),
footer: RefreshFooter(),
controller: _refreshController,
onRefresh: getArticleList,
onLoading: getMoreSquareList,
child: ListView.builder(
itemBuilder: itemView,
itemCount: _articles.length,
controller: _scrollController,
),
);
}
6.自定义脚布局
/// 自定义 FooterView
class RefreshFooter extends CustomFooter {
@override
double get height => 40;
@override
FooterBuilder get builder => (context, mode) {
Widget body;
if (mode == LoadStatus.idle) {
body = Text("上拉加载更多~");
} else if (mode == LoadStatus.loading) {
body = Wrap(
spacing: 6,
children: <Widget>[
CupertinoActivityIndicator(),
Text("加载中..."),
],
);
} else if (mode == LoadStatus.failed) {
body = Text("加载失败，点击重试~");
} else {
body = Text("没有更多数据了~");
}
return Container(
height: 40,
child: Center(child: body),
);
};
}
最后：总结
- Flutter简介、环境搭建、Dart语法基础
- FLutter项目框架搭建：侧滑、底部导航
- Flutter项目：首页轮播+列表实现多布局，刷新
- Flutter项目广场：列表展示网络数据、复杂布局
- Flutter项目首页：列表、多布局
- FLutter项目公众号：网络获取公众号数据，使用TabBar与TabBarView实现页面切换、Widget复用
- Flutter项目体系：完成体系功能，webview展示详情页、流式布局
- Flutter项目导航页（实现页面跳转、传值、回传值）、欢迎页实现
- 红屏处理
- 倒计时
网友评论