Flower_gift 简单的Flutter实战app(二)

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布局写太多了。

下一篇完成首页的全部编写.

首页完成

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容