flutter实战 开发商城 （含数据库、接口（二）

接着上次的来：我准备了一个数据库：先来2个表，数据你可以自己添加一些。然后你需要自己写一个接口：由于是虚拟机网卡不在本机，所以你这里设置的地址应该是虚拟机访问的地址，最好是在网络上。

CREATE TABLE `faqiniu_app_category` (
  `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `category` varchar(30) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '分类名称',
  `iconimage` varchar(255) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '图片',
  `createtime` int(10) NOT NULL DEFAULT '0' COMMENT '创建时间',
  `updatetime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
  `weigh` int(10) NOT NULL DEFAULT '0' COMMENT '权重',
  `status` varchar(30) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '状态',
  PRIMARY KEY (`Id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COMMENT='APP分类表';

#
# Data for table "faqiniu_app_category"
#

/*!40000 ALTER TABLE `faqiniu_app_category` DISABLE KEYS */;
INSERT INTO `faqiniu_app_category` VALUES (1,'小猪','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621575672&di=c790d749b8416026851289b40b95a26e&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1132408539%2C295489701%26fm%3D214%26gp%3D0.jpg',1573611521,1573611521,1,'1'),(2,'奶牛','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573838&di=98c74b1adb216143593e3d7cdab16cdb&imgtype=0&src=http%3A%2F%2Fwww.96weixin.com%2Fupload%2F20181128%2F1543377987753618.jpg',1573611564,1573611564,2,'1'),(3,'兔兔','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573835&di=1518cdb62d5f8c3cf3ec9e6ac7d29bcf&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-3%2F2016031409495466836.jpg',1573611592,1573611592,3,'1'),(4,'海豚','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573871&di=5bb26f2b426eb9e8a312d935a9d8888e&imgtype=0&src=http%3A%2F%2Fimg26.nipic.com%2F20110815%2F3674499_163211079375_1.jpg',1573611619,1573611619,4,'1'),(5,'女生','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621573870&di=9e128c472b6a519d47799eda90b64387&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_ls%2F0%2F4543723534_200200%2F0.jpg',1573611644,1573611644,5,'1'),(6,'麻雀','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750163&di=e8202bd02da38214212bab495bcf34a4&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_ls%2F0%2F5813383339_200200%2F0.jpg',1573611694,1573611694,6,'1'),(7,'久妮','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750161&di=132561324273ad20124a10994461197a&imgtype=0&src=http%3A%2F%2Ftx.haiqq.com%2Fuploads%2Fallimg%2F170426%2F0922045M9-8.jpg',1573611725,1573611725,7,'1'),(8,'动物','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750161&di=ebc2735c9992be3f3a34de5764e77294&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_ls%2F0%2F8477897421_200200%2F0.jpg',1573611741,1573611741,8,'1'),(9,'皮卡丘','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573621750160&di=ab92d5382050e77fe287227a9806f337&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Fface%2Fd4f96bf5a5c907d5a6db4344184efc0266205c9f.gif',1573611773,1573611773,9,'1'),(10,'小绿','/uploads/20191113/6aba40b393179cecde4fe0f0f1bfb61fMax.png',1573611800,1573611800,10,'1'); 

#
# Structure for table "faqiniu_app_lunbo"
#

 
CREATE TABLE `faqiniu_app_lunbo` (
  `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `urlimage` varchar(255) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '下载地址',
  `goodsid` int(11) NOT NULL DEFAULT '0' COMMENT '商品ID',
  `createtime` int(10) NOT NULL DEFAULT '0' COMMENT '创建时间',
  `updatetime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
  `weigh` int(10) NOT NULL DEFAULT '0' COMMENT '权重',
  `status` varchar(30) CHARACTER SET utf8 NOT NULL DEFAULT '' COMMENT '状态',
  PRIMARY KEY (`Id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COMMENT='APP轮播图';

#
# Data for table "faqiniu_app_lunbo"
#
 
INSERT INTO `faqiniu_app_lunbo` VALUES (1,'http: 0a3b31Max.jpg',1,1573608905,1573608905,1,'1'),(2,'/uplo 1Max.png',2,1573608966,1573608966,2,'1'); 

最后让你的输出类似这样。

数据准备好了，然后修改我们上次的代码：

确认你添加了相关的依赖：

lib/main.dart:

import 'package:flutter/material.dart';
import './pages/index_page.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title:'百姓生活+',
        debugShowCheckedModeBanner: false, //Flutter去除右上角Debug标签
        theme: ThemeData(
          primaryColor:Colors.pink
        ),
        home:IndexPage()
      ),
    );
  }
}

lib/pages/index_page.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search), title: Text('分类')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart), title: Text('购物车')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled), title: Text('会员中心'))
  ];
  final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];
  int currentIndex = 0;
  var currentPage;
  @override
  void initState() {
    super.initState();
    currentPage = tabBodies[currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bottomTabs,
        onTap: (index) {
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[currentIndex];
          });
        },
      ),
      body: currentPage,
    );
  }
}

同级目录下四个分页：

homexxxxx

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import './TopNavigator.dart';
import './ad_banner.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("百姓生活+"),
        ),
        body: FutureBuilder(
          future: getHomePageContent(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
             

              var e = json.encode(snapshot.data);
              var data = json.decode(e.toString());

 
              List<Map> swiperDataList =
                  (data['data']['slides'] as List).cast(); // 顶部轮播组件数
              List<Map> navigatorList =
                  (data['data']['category'] as List).cast(); //类别列表
              String advertesPicture =  data['data']['advertesPicture']['PICTURE_ADDRESS']; //广告图片

              //  print(swiperDataList);
              return Column(
                children: <Widget>[
                  SwiperDiy(swiperDataList: swiperDataList),
                  TopNavigator(navigatorList: navigatorList), //导航组件
                  AdBanner(advertesPicture: advertesPicture), //广告组件
                ],
              );
            } else {
              return Center(
                child: Text('Loading....'),
              );
            }
          },
        ));
  }
}

// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {
  final List swiperDataList;
  SwiperDiy({Key key, this.swiperDataList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    return Container(
      height: ScreenUtil().setHeight(333),
      width: ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.network("${swiperDataList[index]['urlimage']}",
              fit: BoxFit.fill);
        },
        itemCount: swiperDataList.length,
        pagination: new SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

service

.

import 'package:dio/dio.dart';
import 'dart:async';
// import 'dart:io';
import '../config/service_url.dart';
 
Future getHomePageContent() async {
  try {
    print('start get HomePage data.....');
    Response response;
    Dio dio = new Dio();
    // dio.options.contentType("application/x-www-form-urlencoded") ;
    var fromData = {'Sokey': ''};
    response = await dio.post(servicePath['homePageContext'], data: fromData);
     
    if (response.statusCode == 200) {
      return response.data;
    } else {
      throw Exception('后端接口异常！');
    }
  } catch (e) {
    return print('ERROR:======>' + e);
  }
}

serviceurl.dart

const serviceUrl= 'http://www. com/index/ajax/';//此端口  自行fiddle获取。
const servicePath={
  'homePageContext': serviceUrl+'homePageContent', // 商家首页信息
};
 
 

下面我增加一个插件：可以用来拨打电话

https://github.com/flutter/plugins/tree/master/packages/url_launcher