一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。
代码文档
Flutter防京东商城源码(1-10)链接
Flutter防京东商城源码(11-20)链接
Flutter防京东商城源码(21-30)链接
Flutter防京东商城源码(31-46)链接
效果：
1.修改一个BUG。当确单页面没有地址的时候提示修改地址才能跳去支付页面。
添加下面的代码
导入
import 'package:fluttertoast/fluttertoast.dart';child: RaisedButton(child:Text('立即下单', style: TextStyle(color: Colors.white)),color: Colors.red,onPressed: () async {if (this._addressList.length > 0) {//--------------------------------------------....//跳转到支付页面Navigator.pushNamed(context, '/pay');}//--------------------------------------------} else {Fluttertoast.showToast(msg: '请填写收货地址',toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.CENTER,);}//--------------------------------------------
2.编写订单列表
2.1首先先看一下下面的图片，这个订单列表的结构图
2.2.把订单列表跟订单详情拖进来。
Order
import 'package:flutter/material.dart';import 'package:flutter_app/services/screenAdaper.dart';import '../widget/JdButton.dart';class OrderPage extends StatefulWidget {OrderPage({Key key}) : super(key: key);_OrderPageState createState() => _OrderPageState();}class _OrderPageState extends State<OrderPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("我的订单"),),body: Stack(children: <Widget>[Container(margin: EdgeInsets.fromLTRB(0, ScreenAdaper.height(80), 0, 0),padding: EdgeInsets.all(ScreenAdaper.width(16)),child: ListView(children: <Widget>[Card(child: Column(children: <Widget>[ListTile(title: Text("订单编号：xxxxxxxx"),),SizedBox(height: 10),ListTile(leading: Container(width: ScreenAdaper.width(120),height: ScreenAdaper.height(120),child: work('/images/flutter/list2.jpg',fit: BoxFit.cover,),),title: Text("6小时学会TypeScript入门实战视频教"),trailing: Text('x1'),onTap: (){Navigator.pushNamed(context, '/orderinfo');},),SizedBox(height: 10),ListTile(leading: Container(width: ScreenAdaper.width(120),height: ScreenAdaper.height(120),child: work('/images/flutter/list2.jpg',fit: BoxFit.cover,),),title: Text("6小时学会TypeScript入门实战视频教t入门实战视"),trailing: Text('x1'),onTap: (){Navigator.pushNamed(context, '/orderinfo');},),SizedBox(height: 10),ListTile(leading: Text("合计：￥345"),trailing: FlatButton(child: Text("申请售后"),onPressed: () {},color: Colors.grey[100],),),],),),Card(child: Column(children: <Widget>[ListTile(title: Text("订单编号：xxxxxxxx"),),SizedBox(height: 10),ListTile(leading: Container(width: ScreenAdaper.width(120),height: ScreenAdaper.height(120),child: work('/images/flutter/list2.jpg',fit: BoxFit.cover,),),title: Text("6小时学会TypeScript入门实战视频教"),trailing: Text('x1'),onTap: (){Navigator.pushNamed(context, '/orderinfo');},),SizedBox(height: 10),ListTile(leading: Container(width: ScreenAdaper.width(120),height: ScreenAdaper.height(120),child: work('/images/flutter/list2.jpg',fit: BoxFit.cover,),),title: Text("6小时学会TypeScript入门实战视频教t入门实战视"),trailing: Text('x1'),onTap: (){Navigator.pushNamed(context, '/orderinfo');},),SizedBox(height: 10),ListTile(leading: Text("合计：￥345"),trailing: FlatButton(child: Text("申请售后"),onPressed: () {},color: Colors.grey[100],),),],),),Card(child: Column(children: <Widget>[ListTile(title: Text("订单编号：xxxxxxxx"),),SizedBox(height: 10),ListTile(leading: Container(width: ScreenAdaper.width(120),height: ScreenAdaper.height(120),child: work('/images/flutter/list2.jpg',fit: BoxFit.cover,),),title: Text("6小时学会TypeScript入门实战视频教"),trailing: Text('x1'),onTap: (){Navigator.pushNamed(context, '/orderinfo');},),SizedBox(height: 10),ListTile(leading: Container(width: ScreenAdaper.width(120),height: ScreenAdaper.height(120),child: work('/images/flutter/list2.jpg',fit: BoxFit.cover,),),title: Text("6小时学会TypeScript入门实战视频教t入门实战视"),trailing: Text('x1'),onTap: (){Navigator.pushNamed(context, '/orderinfo');},),SizedBox(height: 10),ListTile(leading: Text("合计：￥345"),trailing: FlatButton(child: Text("申请售后"),onPressed: () {},color: Colors.grey[100],),),],),)],),),Positioned(top: 0,width: ScreenAdaper.width(750),height: ScreenAdaper.height(76),child: Container(width: ScreenAdaper.width(750),height: ScreenAdaper.height(76),color: Colors.white,child: Row(children: <Widget>[Expanded(child: Text("全部", textAlign: TextAlign.center),),Expanded(child: Text("待付款", textAlign: TextAlign.center),),Expanded(child: Text("待收货", textAlign: TextAlign.center),),Expanded(child: Text("已完成", textAlign: TextAlign.center),),Expanded(child: Text("已取消", textAlign: TextAlign.center),)],),),)],),);}}
OrderInfo
import 'package:flutter/material.dart';import 'package:flutter_app/services/screenAdaper.dart';class OrderInfoPage extends StatefulWidget {OrderInfoPage({Key key}) : super(key: key);_OrderInfoPageState createState() => _OrderInfoPageState();}class _OrderInfoPageState extends State<OrderInfoPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("订单详情")),body: Container(child: ListView(children: <Widget>[//收货地址Container(color: Colors.white,child: Column(children: <Widget>[SizedBox(height: 10),ListTile(leading: Icon(Icons.add_location),title: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("张三 1586455"),SizedBox(height: 10),Text("北京市海淀区 西二旗"),],),),SizedBox(height: 10),],),),SizedBox(height: 16),//列表Container(color: Colors.white,padding: EdgeInsets.all(10),child: Column(children: <Widget>[Row(children: <Widget>[Container(margin: EdgeInsets.fromLTRB(0, 10, 0, 0),width: ScreenAdaper.width(120),child: work("/images/flutter/list2.jpg",fit: BoxFit.cover),),Expanded(flex: 1,child: Container(padding: EdgeInsets.fromLTRB(10, 10, 10, 5),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("四季沐歌 (MICOE) 洗衣机水龙头 洗衣机水嘴 单冷快开铜材质龙头",maxLines: 2,style: TextStyle(color: Colors.black54)),Text("水龙头 洗衣机",maxLines: 2,style: TextStyle(color: Colors.black54)),ListTile(leading: Text("￥100",style: TextStyle(color: Colors.red)),trailing: Text("x2"),)],),))],),Row(children: <Widget>[Container(margin: EdgeInsets.fromLTRB(0, 10, 0, 0),width: ScreenAdaper.width(120),child: work("/images/flutter/list2.jpg",fit: BoxFit.cover),),Expanded(flex: 1,child: Container(padding: EdgeInsets.fromLTRB(10, 10, 10, 5),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("四季沐歌 (MICOE) 洗衣机水龙头 洗衣机水嘴 单冷快开铜材质龙头",maxLines: 2,style: TextStyle(color: Colors.black54)),Text("水龙头 洗衣机",maxLines: 2,style: TextStyle(color: Colors.black54)),ListTile(leading: Text("￥100",style: TextStyle(color: Colors.red)),trailing: Text("x2"),)],),))],),],),),//详情信息Container(color: Colors.white,margin: EdgeInsets.fromLTRB(0, 10, 0, 0),child: Column(children: <Widget>[ListTile(title: Row(children: <Widget>[Text("订单编号:",style: TextStyle(fontWeight: FontWeight.bold)),Text("124215215xx324")],),),ListTile(title: Row(children: <Widget>[Text("下单日期:",style: TextStyle(fontWeight: FontWeight.bold)),Text("-12-09")],),),ListTile(title: Row(children: <Widget>[Text("支付方式:",style: TextStyle(fontWeight: FontWeight.bold)),Text("微信支付")],),),ListTile(title: Row(children: <Widget>[Text("配送方式:",style: TextStyle(fontWeight: FontWeight.bold)),Text("顺丰")],),)],),),SizedBox(height: 16),Container(color: Colors.white,margin: EdgeInsets.fromLTRB(0, 10, 0, 0),child: Column(children: <Widget>[ListTile(title: Row(children: <Widget>[Text("总金额:",style: TextStyle(fontWeight: FontWeight.bold)),Text("￥414元",style: TextStyle(color: Colors.red))],))],),)],),),);}}
3.配置路由。
import '../pages/Order.dart';import '../pages/OrderInfo.dart';'/order': (context) => OrderPage(),'/orderinfo': (context) => OrderInfoPage(),
4.回到用户个人中心
ListTile(leading: Icon(Icons.assignment, color: Colors.red),title: Text("全部订单"),onTap: (){Navigator.pushNamed(context, '/order');//--------------------------------},),
