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

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

首页完成

推荐阅读更多精彩内容

  • 好久没在简书写东西了,基本上自己的笔记都写在印象上去了。这次分享flutter呢,是记录一下自己用flutter做...
    浮桥小麦阅读 655评论 0 1
  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star...
    Nealyang阅读 4,135评论 1 16
  • 目录 1.Dart语法 2.Flutter工程目录 3.Widget简介 4.常用Widget介绍 5.实战 先看...
    慕涵盛华阅读 3,361评论 0 16
  • 俗话说得好:“得语文者得天下。”但得语文又何尝是一件容易的事情呢? 就拿这次语文考试来说吧。这次考...
    墨棠绮阅读 382评论 3 2
  • 我看到了一个新的世界。一次次的启发与思考,接着却是猝不及防的反讽,揭露人性的黑暗,由此引发更深入的思考,真实动人。...
    连明堂阅读 424评论 0 8
  • 懒洋洋的晒太阳。。懒洋洋地行走。懒洋洋地读书,。。为何这般提不起劲。。。哦……窗外已是春天,蠢蠢欲动的春天
    茉莉清扬阅读 86评论 0 0