Flutter實戰視頻-移動電商-45.詳細頁_說明區域UI編寫

45.詳細頁_說明區域UI編寫

pages/details_page/details_expain.dart

 

詳情頁面引用組件

 

 

效果展現：

 

最終代碼：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DetailsExplain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top:10.0),
      width: ScreenUtil().setWidth(750),
      padding: EdgeInsets.all(10.0),
      child: Text(
        '說明： > 極速送達 > 正品保證',
        style: TextStyle(
          color: Colors.red,
          fontSize: ScreenUtil().setSp(30)
        ),
      ),
    );
  }
}

 

 

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';
import './details_page/details_top_area.dart';
import './details_page/details_expain.dart';

class DetailsPage extends StatelessWidget {
  final String goodsId;

  DetailsPage(this.goodsId);//flutter 1.2的最新的寫法 構造函數

  @override
  Widget build(BuildContext context) {
 
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: (){
            Navigator.pop(context);//返回上一個頁面
          },
        ),
        title: Text('商品詳細頁'),
      ),
      body: FutureBuilder(
        future: _getBackInfo(context),
        builder: (context,snapshot){
          //判斷是否有數據
          if(snapshot.hasData){
            //若是有數據返回一個Container
            return Container(
              child: Column(
                children: <Widget>[
                  DetailsTopArea(),
                  DetailsExplain(),
                ],
              ),
            );
          }else{
            return Text('加載中......');//沒有數據的狀況
          }
        },
      ),
    );
  }

  Future _getBackInfo(BuildContext context) async{
    await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
    //print('加載完成...........');
    return '完成加載';
  }

}

details_page.dart