20 Flutter仿京東商城項目 商品詳情 底部彈出篩選屬性 以及篩選屬性頁面布局

ProductContentFirst.dart

import 'package:flutter/material.dart';
import '../../widget/JdButton.dart';
import '../../services/ScreenAdaper.dart';

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

  _ProductContentFirstState createState() => _ProductContentFirstState();
}

class _ProductContentFirstState extends State<ProductContentFirst> {
  _attrBottomSheet() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return GestureDetector(
              //Gesture:手勢  Detector:探測器
              onTap: () {
                return false;
              },
              child: Stack(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(ScreenAdaper.width(20)),
                    child: ListView(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Wrap(
                              children: <Widget>[
                                Container(
                                  width: ScreenAdaper.width(100),
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                        top: ScreenAdaper.height(35)),
                                    child: Text('顏色',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold)),
                                  ),
                                ),
                                Container(
                                  width: ScreenAdaper.width(610),
                                  child: Wrap(
                                    children: <Widget>[
                                      Container(
                                        margin: EdgeInsets.all(10),
                                        child: Chip(
                                          label: Text('白色'),
                                          padding: EdgeInsets.all(10),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.all(10),
                                        child: Chip(
                                          label: Text('白色'),
                                          padding: EdgeInsets.all(10),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.all(10),
                                        child: Chip(
                                          label: Text('白色'),
                                          padding: EdgeInsets.all(10),
                                        ),
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    width: ScreenAdaper.width(750),
                    height: ScreenAdaper.height(76),
                    child: Row(
                      children: <Widget>[
                        Container(
                            width: ScreenAdaper.width(750),
                            height: ScreenAdaper.height(76),
                            child: Row(
                              children: <Widget>[
                                Expanded(
                                  flex: 1,
                                  child: Container(
                                    margin: EdgeInsets.fromLTRB(10,0,10,0),
                                    child: JdButton(
                                      color: Color.fromRGBO(253, 1, 0, 0.9),
                                      text: "加入購物車",
                                      cb: () {
                                        print('加入購物車');
                                      },
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Container(
                                    margin: EdgeInsets.fromLTRB(10,0,10,0),
                                    child: JdButton(
                                      color: Color.fromRGBO(255, 165, 0, 0.9),
                                      text: "立即購物",
                                      cb: () {
                                        print('立即購物');
                                      },
                                    ),
                                  )
                                )
                              ],
                            ))
                      ],
                    ),
                  )
                ],
              ));
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: ListView(
          children: <Widget>[
            AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "https://www.itying.com/images/flutter/p1.jpg",
                  fit: BoxFit.cover,
                )),
            Container(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                  "聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad",
                  style: TextStyle(
                      color: Colors.black87, fontSize: ScreenAdaper.size(36))),
            ),
            Container(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                  "聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad聯想ThinkPad",
                  style: TextStyle(
                      color: Colors.black54, fontSize: ScreenAdaper.size(28))),
            ),
            Container(
              padding: EdgeInsets.only(top: 10),
              child: Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Row(
                      children: <Widget>[
                        Text('特價'),
                        Text('￥28',
                            style: TextStyle(
                                color: Colors.red,
                                fontSize: ScreenAdaper.size(46)))
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text('原價'),
                        Text('￥50',
                            style: TextStyle(
                                color: Colors.black38,
                                fontSize: ScreenAdaper.size(28),
                                decoration: TextDecoration.lineThrough))
                      ],
                    ),
                  )
                ],
              ),
            ),
            //篩選：
            Container(
                margin: EdgeInsets.only(top: 10),
                height: ScreenAdaper.height(80),
                child: InkWell(
                  onTap: () {
                    _attrBottomSheet();
                  },
                  child: Row(
                    children: <Widget>[
                      Text('已選', style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('115,黑色')
                    ],
                  ),
                )),
            Divider(),
            Container(
              height: ScreenAdaper.height(80),
              child: Row(
                children: <Widget>[
                  Text('運費', style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('免運費')
                ],
              ),
            ),
            Divider()
          ],
        ));
  }
}