0001.jpg
项目git地址:flower_gift
首页导航部分编写
完成效果:
3333.gif
首页数据provide
数据模型化用的是:FlutterJsonBeanFactory(Android Studio插件)
数据模型(model/homePage_model_entity)
class HomePageModelEntity {
List<HomePageModelImage> images;
HomePageModelKformember kfOrmember;
HomePageModelComments comments;
String recommendTitle;
HomePageModelMsgcenter msgcenter;
List<HomePageModelFlowercategory> flowercategory;
HomePageModelSection1 section1;
HomePageModelSection2 section2;
HomePageModelSection3 section3;
HomePageModelSection4 section4;
int commentCount;
HomePageModelSection5 section5;
List<HomePageModelNavtop> navtop;
HomePageModelSection6 section6;
HomePageModelCustomerservice customerService;
List<HomePageModelRecommand2> recommend2;
List<HomePageModelRecommand3> recommend3;
List<HomePageModelFlowercategory2> flowercategory2;
HomePageModelEntity({this.images, this.kfOrmember, this.comments, this.recommendTitle, this.msgcenter, this.flowercategory, this.section1, this.section2, this.section3, this.section4, this.commentCount, this.section5, this.navtop, this.section6, this.customerService, this.recommend2, this.recommend3, this.flowercategory2});
.........
首页数据请求provide(provide/homePage_provide.dart)
import 'package:flower_gift/model/homePage_model_entity.dart';
import "package:flutter/material.dart";
import 'package:flutter/widgets.dart';
import '../service/service_http_method.dart';
import 'dart:convert';
class HomePageProvide with ChangeNotifier {
HomePageModelEntity homePageModelEntity;
//后台获取数据
getHomePageData(){
requestGet("shouye").then((val){
var responseData = json.decode(val.toString());
homePageModelEntity = HomePageModelEntity.fromJson(responseData);
notifyListeners();
});
}
}
注册provide(main.dart)
void main() {
var providers = Providers();
var tabBarTapProvide = TabBarTapProvide();
var homePageProvide = HomePageProvide();
//状态管理注册
providers
..provide(Provider<TabBarTapProvide>.value(tabBarTapProvide))
..provide(Provider<HomePageProvide>.value(homePageProvide));
runApp(
ProviderNode(
child: MyApp(),
providers: providers,
)
);
}
分子组件编写首页
1.顶部轮播(pages/homeSubWidget/home_topSwiper_widget.dart)
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:provide/provide.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../provide/homePage_provide.dart';
class HomeSwiper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide<HomePageProvide>(
builder: (context,child,val){
var swiperDataList = val.homePageModelEntity.images;
return Container(
height: ScreenUtil().setHeight(386),
child: Swiper(
itemBuilder: (BuildContext context,int index){
return Image.network("${swiperDataList[index].image}");
},
onTap: (index){
print("点击了轮播组件:${index}");
},
itemCount: swiperDataList.length,
pagination: buildSwiperPagintion(),
autoplay: true,
),
);
},
);
}
//自己配置的分页指示器
buildSwiperPagintion(){
return SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.white,
activeColor: Colors.orange
)
);
}
}
2.标签组件(pages/homeSubWidget/home_smallTag_widget.dart)
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class HomeSmallTag extends StatelessWidget {
final List tags = ["认证龙头企业","14年品牌","3小时送花","最近320673条评论"];
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.only(top: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: _createWidget(tags)
),
);
}
List<Widget> _createWidget(List tagList){
List<Widget> list = new List();
for(var i = 0; i < tags.length; i++){
list.add(
Row(
children: <Widget>[
Icon(Icons.check_circle,
size: ScreenUtil().setSp(30.0),
color: Color.fromRGBO(45, 60, 49, 1.0),
),
Text("${tags[i]}",
style: TextStyle(color: Colors.black45,fontSize: ScreenUtil().setSp(20.0)),
)
],
)
);
}
return list;
}
}
3.导航组件(pages/homeSubWidget/home_navtop_widget.dart)
import 'package:flutter/material.dart';
import '../../model/homePage_model_entity.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../provide/homePage_provide.dart';
import 'package:provide/provide.dart';
class HomeNavtop extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide<HomePageProvide>(
builder: (context,child,val){
var navtop = val.homePageModelEntity.navtop;
return Container(
margin: EdgeInsets.only(top: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _createWidget(navtop),
),
);
}
);
}
List<Widget> _createWidget(List<HomePageModelNavtop> navtop){
List<Widget> list = new List();
for(var i = 0; i < navtop.length; i++){
list.add(
Container(
width: ScreenUtil().setWidth(70),
child: InkWell(
onTap: (){
print("点击顶部导航item");
},
child: Column(
children: <Widget>[
Image.network(navtop[i].image),
Container(
margin: EdgeInsets.only(top: 5.0),
child:Text("${navtop[i].title}",
style: TextStyle(fontSize: ScreenUtil().setSp(22),
),
) ,
)
],
),
)
)
);
}
return list;
}
}
4.分类组件(pages/homeSubWidget/home_flowerCategory_widget.dart)
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../model/homePage_model_entity.dart';
import 'package:provide/provide.dart';
import '../../provide/homePage_provide.dart';
class HomeFlowerCategroy extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide<HomePageProvide>(
builder: (context,child,val){
var homePageModelEntity = val.homePageModelEntity;
return Container(
margin: EdgeInsets.only(top: 10.0),
child: Column(
children: <Widget>[
_titleWidget(homePageModelEntity),
_firstFlowerCategory(homePageModelEntity.flowercategory),
_twoFlowerCategory(homePageModelEntity.flowercategory2),
_oneRecommend(homePageModelEntity.recommend2),
_twoRecommend(homePageModelEntity.recommend3)
],
),
);
}
);
}
//标题组件>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Widget _titleWidget(HomePageModelEntity entity){
return Container(
padding: EdgeInsets.only(left: 15.0),
alignment: Alignment.centerLeft,
child: Text(
entity.recommendTitle,
style: TextStyle(
color: Colors.orange
),
),
);
}
//flowerCategory one 组件>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Widget _firstFlowerCategory(List<HomePageModelFlowercategory> flowerCategory){
return Container(
margin: EdgeInsets.only(top: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _firstFlowerCategoryList(flowerCategory),
),
);
}
List<Widget> _firstFlowerCategoryList(List<HomePageModelFlowercategory> flowerCategory){
List<Widget> list = new List();
for(var i = 0; i < flowerCategory.length; i++){
list.add(
_firstFlowerCategoryItem(flowerCategory[i])
);
}
return list;
}
Widget _firstFlowerCategoryItem(HomePageModelFlowercategory flowerCategoryItem){
return ClipRRect(
borderRadius:BorderRadius.circular(8.0),
child: Container(
width:ScreenUtil().setWidth(226.0),
// height: 160.0,
child: InkWell(
onTap: (){
print("点击了flowerCategoryItem...");
},
child: Stack(
alignment: const FractionalOffset(0.5, 0.1),
children: <Widget>[
Image.network(flowerCategoryItem.image),
Text(flowerCategoryItem.title),
],
),
)
),
);
}
//flowerCategory two 组件>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Widget _twoFlowerCategory(List<HomePageModelFlowercategory2> flowerCategory2){
return Container(
margin: EdgeInsets.only(top: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _twoFlowerCategoryList(flowerCategory2),
),
);
}
List<Widget> _twoFlowerCategoryList(List<HomePageModelFlowercategory2> flowerCategory2){
List<Widget> list = new List();
for(var i = 0; i < flowerCategory2.length; i++){
list.add(
_twoFlowerCategoryItem(flowerCategory2[i])
);
}
return list;
}
Widget _twoFlowerCategoryItem(HomePageModelFlowercategory2 flowerCategoryItem){
return Container(
width:ScreenUtil().setWidth(160.0),
// height: 120.0,
child: InkWell(
onTap: (){
print("点击了flowerCategoryItem2...");
},
child: Stack(
alignment: const FractionalOffset(0.5, 0.1),
children: <Widget>[
Image.network(flowerCategoryItem.image),
Text(flowerCategoryItem.title),
],
),
)
);
}
//recommend one 组件>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Widget _oneRecommend(List<HomePageModelRecommand2> recommend2){
return Container(
margin: EdgeInsets.only(top: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _oneRecommendList(recommend2),
),
);
}
List<Widget> _oneRecommendList(List<HomePageModelRecommand2> recommend2){
List<Widget> list = new List();
for(var i = 0; i < recommend2.length; i++){
list.add(
_oneRecommendItem(recommend2[i])
);
}
return list;
}
Widget _oneRecommendItem(HomePageModelRecommand2 recommendItem){
return Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 0.5,color: Colors.black12)
),
width:ScreenUtil().setWidth(360.0),
child: InkWell(
onTap: (){
print("点击了recommendItem2...");
},
child: Row(
children: <Widget>[
_oneRecommendItemLeft(recommendItem),
_oneRecommendItemRight(recommendItem)
],
)
)
),
);
}
Widget _oneRecommendItemLeft(HomePageModelRecommand2 recommendItem){
return Container(
width: ScreenUtil().setWidth(180.0),
child: Column(
children: <Widget>[
Text("${recommendItem.title}"),
Container(
margin: EdgeInsets.only(top: 5.0),
child: Text("${recommendItem.desc}",
style: TextStyle(color: Colors.black26,fontSize: ScreenUtil().setSp(22.0)),
)
),
Container(
margin: EdgeInsets.only(top: 38.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Container(
width: ScreenUtil().setWidth(160.0),
height: ScreenUtil().setHeight(30.0),
color: Colors.orange,
alignment: Alignment.center,
child: Text("${recommendItem.redWord}",
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(22.0)
),
),
),
),
)
],
),
);
}
Widget _oneRecommendItemRight(HomePageModelRecommand2 recommendItem){
bool isSales;
isSales = recommendItem.sales.length > 0 ? true : false;
return Container(
width: ScreenUtil().setWidth(180.0),
child: Column(
children: <Widget>[
Image.network(recommendItem.image),
isSales ? Text("热销${recommendItem.sales}束") : Row(
children: <Widget>[
Text("￥${recommendItem.price}"),
Text("￥${recommendItem.linePrice}",
style: TextStyle(
color: Colors.black26,
decoration: TextDecoration.lineThrough
),
)
],
)
],
),
);
}
//recommend two 组件>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Widget _twoRecommend(List<HomePageModelRecommand3> recommend2){
return Container(
margin: EdgeInsets.only(top: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _twoRecommendList(recommend2),
),
);
}
List<Widget> _twoRecommendList(List<HomePageModelRecommand3> recommend2){
List<Widget> list = new List();
for(var i = 0; i < recommend2.length; i++){
list.add(
_twoRecommendItem(recommend2[i])
);
}
return list;
}
Widget _twoRecommendItem(HomePageModelRecommand3 recommandItem){
return Container(
width:ScreenUtil().setWidth(220.0),
// height: 160.0,
child: InkWell(
onTap: (){
print("点击了recommendItem2...");
},
child: Stack(
alignment: const FractionalOffset(0, 1),
children: <Widget>[
Image.network(recommandItem.image),
Container(
width:ScreenUtil().setWidth(220.0),
height: ScreenUtil().setHeight(48.0),
alignment: Alignment.center,
color: Colors.black38,
child: Text(recommandItem.title,
style:TextStyle(
color: Colors.white
)
),
)
],
),
)
);
}
}
分类组件写了些重复的布局代码，也没有去修改了。 其次就是热销和特价专区布局没有按照这个原图做。 原图给的鲜花图片是要做成一张大背景的，然后文字悬浮的，用Stack布局写太多了。
