39 Flutter仿京東商城項目 收貨地址列表、增長 修改收貨地址佈局、彈出省市區選擇器

加羣452892873 下載對應39課文件，運行方法，建好項目，直接替換lib目錄

pubspec.yaml

city_pickers: ^0.1.22

AddressAdd.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';
import 'package:city_pickers/city_pickers.dart';

class AddressAddPage extends StatefulWidget {
  AddressAddPage({Key key}) : super(key: key);

  _AddressAddPageState createState() => _AddressAddPageState();
}

class _AddressAddPageState extends State<AddressAddPage> {
  String area = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('增長收貨地址'),
        ),
        body: Container(
          child: ListView(
            children: <Widget>[
              JdText(
                text: "收貨人姓名",
              ),
              SizedBox(height: 10),
              JdText(
                text: "收貨人電話",
              ),
              SizedBox(height: 10),
              Container(
                padding: EdgeInsets.only(left: 5),
                height: ScreenAdapter.height(68),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(width: 1, color: Colors.black12))),
                child: InkWell(
                  child: Row(
                    children: <Widget>[
                      Icon(Icons.add_location),
                      this.area.length > 0
                          ? Text("${this.area}",
                              style: TextStyle(color: Colors.black54))
                          : Text("省/市/區",
                              style: TextStyle(color: Colors.black54))
                    ],
                  ),
                  onTap: () async {
                    Result result = await CityPickers.showCityPicker(
                        context: context,
                        cancelWidget:
                            Text('取消', style: TextStyle(color: Colors.black54)),
                        confirmWidget:
                            Text("肯定", style: TextStyle(color: Colors.blue)));

                    setState(() {
                      this.area =
                          "${result.provinceName}/${result.cityName}/${result.areaName}";
                    });
                  },
                ),
              ),
              SizedBox(height: 10),
              JdText(
                text: "詳細地址",
                maxLines: 4,
                height: 200,
              ),
              SizedBox(height: 10),
              RaisedButton(
                child: Text("彈出省市區"),
                onPressed: () async {
                  Result result = await CityPickers.showCityPicker(
                      context: context,
                      cancelWidget:
                          Text('取消', style: TextStyle(color: Colors.black54)),
                      confirmWidget:
                          Text("肯定", style: TextStyle(color: Colors.blue)));
                },
              ),
              SizedBox(height: 40),
              JdButton(
                text: "增長",
                color: Colors.red,
              )
            ],
          ),
        ));
  }
}

AddressEdit.dart

import 'package:flutter/material.dart';
class AddressEditPage extends StatefulWidget {
  AddressEditPage({Key key}) : super(key: key);

  _AddressEditPageState createState() => _AddressEditPageState();
}

class _AddressEditPageState extends State<AddressEditPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('修改收貨地址'),
      ),
      body: Text('增長說活地址'),
    );
  }
}

AddressList.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';

class AddressListPage extends StatefulWidget {
  AddressListPage({Key key}) : super(key: key);

  _AddressListPageState createState() => _AddressListPageState();
}

class _AddressListPageState extends State<AddressListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('收貨列表地址'),
      ),
      body: Container(
          child: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.check, color: Colors.red),
                title: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("張三 13325187796"),
                      SizedBox(height: 10),
                      Text('北京')
                    ]),
                trailing: Icon(Icons.edit, color: Colors.blue),
              )
            ],
          ),
          Positioned(
            bottom: 0,
            width: ScreenAdapter.width(750),
            height: ScreenAdapter.height(88),
            child: Container(
                padding: EdgeInsets.all(5),
                width: ScreenAdapter.width(750),
                height: ScreenAdapter.height(100),
                decoration: BoxDecoration(
                    color: Colors.red,
                    border: Border(
                        top: BorderSide(width: 1, color: Colors.black26))),
                child: InkWell(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.add, color: Colors.white),
                      Text('增長收貨地址', style: TextStyle(color: Colors.white))
                    ],
                  ),
                  onTap: (){
                    Navigator.pushNamed(context,'/addressAdd');
                  },
                )),
          )
        ],
      )),
    );
  }
}

JdText.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
class JdText extends StatelessWidget {
  final String text;
  final bool password;
  final Object onChanged;
  final int maxLines;
  final double height;
  JdText({Key key,this.text="輸入內容",this.password=false,this.onChanged=null,this.maxLines=1,this.height=68}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        maxLines: this.maxLines,
        obscureText: this.password,
        decoration: InputDecoration(
          hintText: this.text,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: BorderSide.none
          )
        ),
        onChanged:this.onChanged,
      ),
      height: ScreenAdapter.height(this.height),
      decoration: BoxDecoration(
        // color: Color.fromRGBO(233,233,233,0.8),
        // borderRadius: BorderRadius.circular(30)
        border: Border(
          bottom:BorderSide(
            width: 1,
            color: Colors.black12
          )
        )
      ),
      
    );
  }
}