美文网首页
Flutter 实现透明dialog和日历

Flutter 实现透明dialog和日历

作者: 郑永博 | 来源:发表于2019-09-27 16:47 被阅读0次
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

Color BLACK_33 = Color(0XFF333333);

Color RED_C6 = Color(0xFFc6183d);

class PropertyDialog extends Dialog {
  BuildContext _context;

  String _image;

  List<String> _colors;

  List<String> _codes;

  String _price;

  String _profit;

  bool showing = false;

  int _count = 1;

  int _currentIndex = 0;

  PropertyDialogClickListener _listener;

  PropertyType _type;

  setListener(PropertyDialogClickListener value) {
    _listener = value;
  }

  PropertyDialog(BuildContext context, PropertyType type, String image,
      List<String> colors, List<String> codes, String price, String profit,
      {Key key})
      : super(key: key) {
    ScreenUtil(width: 1080, height: 1920, allowFontScaling: true)
      ..init(context);
    _context = context;
    _image = image;
    _colors = colors;
    _price = price;
    _profit = profit;
    _codes = codes;
    _type = type;
  }

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(builder: (context, StateSetter setState) {
      return Container(
        height: ScreenUtil.getInstance().setHeight(900),
        child: Column(
          children: <Widget>[
            Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    child: CachedNetworkImage(
                        imageUrl: _image,
                        width: ScreenUtil.getInstance().setWidth(240),
                        height: ScreenUtil.getInstance().setWidth(240),
                        placeholder: (context, url) => Container(
                              width: ScreenUtil.getInstance().setWidth(240),
                              height: ScreenUtil.getInstance().setWidth(240),
                              color: Color(0xfff2f2f2),
                            ),
                        errorWidget: (context, url, error) => new Container(
                              width: ScreenUtil.getInstance().setWidth(240),
                              height: ScreenUtil.getInstance().setWidth(240),
                              color: Color(0xfff2f2f2),
                            ),
                        fit: BoxFit.cover),
                    decoration: BoxDecoration(
                        border: Border.all(
                            width: ScreenUtil.getInstance().setWidth(3),
                            color: Color(0xffd2d2d2))),
                  ),
                  Expanded(
                    child: Container(
                      alignment: Alignment.topLeft,
                      padding:
                          EdgeInsets.all(ScreenUtil.getInstance().setWidth(24)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          RichText(
                              text: TextSpan(children: <TextSpan>[
                            TextSpan(
                                text: "Rs.$_price",
                                style: TextStyle(
                                    fontSize:
                                        ScreenUtil.getInstance().setSp(54),
                                    color: BLACK_33)),
                            TextSpan(
                                text: " /",
                                style: TextStyle(
                                    fontSize:
                                        ScreenUtil.getInstance().setSp(54),
                                    color: RED_C6)),
                            TextSpan(
                                text: "Earn",
                                style: TextStyle(
                                    fontSize:
                                        ScreenUtil.getInstance().setSp(36),
                                    color: RED_C6)),
                            TextSpan(
                                text: " $_profit PKR",
                                style: TextStyle(
                                    fontSize:
                                        ScreenUtil.getInstance().setSp(36),
                                    color: RED_C6))
                          ])),
                          SizedBox(
                            height: ScreenUtil.getInstance().setHeight(24),
                          ),
                          Expanded(
                            child: Text(
                              _colors[0],
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  color: RED_C6,
                                  fontSize: ScreenUtil.getInstance().setSp(39)),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(30),
            ),
            Expanded(
                child: SingleChildScrollView(
              child: Container(
                alignment: Alignment.centerLeft,
                child: Wrap(
                  children: map<Widget>(_colors, (index, color) {
                    return GestureDetector(
                      child: Container(
                        child: Text(
                          color,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: BLACK_33,
                              fontSize: ScreenUtil.getInstance().setSp(36)),
                        ),
                        decoration: BoxDecoration(
                            color: Color(
                              0xfff5f5f5,
                            ),
                            borderRadius: BorderRadius.circular(100),
                            border: _currentIndex == index
                                ? Border.all(
                                    color: RED_C6,
                                    width: ScreenUtil.getInstance().setWidth(1))
                                : Border.all(
                                    color: Colors.transparent, width: 1)),
//                    height: ScreenUtil.getInstance().setHeight(90),
                        padding: EdgeInsets.fromLTRB(
                            ScreenUtil.getInstance().setWidth(30),
                            ScreenUtil.getInstance().setWidth(20),
                            ScreenUtil.getInstance().setWidth(30),
                            ScreenUtil.getInstance().setWidth(20)),
                      ),
                      onTap: () {
                        setState(() {
                          _currentIndex = index;
                          if (_type == PropertyType.TWO) {
                            _listener?.currentSelect(_colors[_currentIndex],
                                _codes[_currentIndex], _count);
                          }
                        });
                      },
                    );
                  }),
                  spacing: ScreenUtil.getInstance().setWidth(30),
                  runSpacing: ScreenUtil.getInstance().setWidth(30),
                ),
              ),
            )),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(20),
            ),
            Row(
              children: <Widget>[
                Text(
                  "Quantity: ",
                  style: TextStyle(
                      fontSize: ScreenUtil.getInstance().setSp(39),
                      color: BLACK_33),
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        GestureDetector(
                          child: Container(
                            color: Colors.transparent,
                            padding: EdgeInsets.fromLTRB(
                                ScreenUtil.getInstance().setWidth(60),
                                ScreenUtil.getInstance().setHeight(15),
                                ScreenUtil.getInstance().setWidth(30),
                                ScreenUtil.getInstance().setHeight(15)),
                            child: Text(
                              "-",
                              style: TextStyle(
                                  fontSize: ScreenUtil.getInstance().setSp(48),
                                  color: BLACK_33),
                            ),
                          ),
                          onTap: () {
                            if (_count > 1) {
                              setState(() {
                                _count--;
                                if (_type == PropertyType.TWO) {
                                  _listener?.currentSelect(
                                      _colors[_currentIndex],
                                      _codes[_currentIndex],
                                      _count);
                                }
                              });
                            }
                          },
                        ),
                        Container(
                          alignment: Alignment.center,
                          child: Text(
                            _count.toString(),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: ScreenUtil.getInstance().setSp(42),
                                color: BLACK_33),
                          ),
                          color: Color(0xfff5f5f5),
                          width: ScreenUtil.getInstance().setWidth(90),
                          height: ScreenUtil.getInstance().setWidth(90),
                        ),
                        GestureDetector(
                          child: Container(
                            color: Colors.transparent,
                            padding: EdgeInsets.fromLTRB(
                                ScreenUtil.getInstance().setWidth(30),
                                ScreenUtil.getInstance().setHeight(15),
                                ScreenUtil.getInstance().setWidth(40),
                                ScreenUtil.getInstance().setHeight(15)),
                            child: Text(
                              "+",
                              style: TextStyle(
                                  fontSize: ScreenUtil.getInstance().setSp(48),
                                  color: BLACK_33),
                            ),
                          ),
                          onTap: () {
                            if (_count < 999) {
                              setState(() {
                                _count++;
                              });
                            }
                          },
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(60),
            ),
            _type != PropertyType.TWO
                ? GestureDetector(
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: RED_C6,
                          borderRadius: BorderRadius.circular(
                            ScreenUtil.getInstance().setWidth(60),
                          )),
                      height: ScreenUtil.getInstance().setHeight(108),
                      child: Text(
                        "Confirm",
                        style: TextStyle(
                            fontSize: ScreenUtil.getInstance().setSp(36),
                            color: Colors.white),
                      ),
                    ),
                    onTap: () {
                      if (_type == PropertyType.CART) {
                        _listener?.addToCart(_codes[_currentIndex], _count);
                      }
                      if (_type == PropertyType.DEAL) {
                        _listener.buyNow(_codes[_currentIndex], _count);
                      }
                      hide();
                    },
                  )
                : Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      GestureDetector(
                        child: Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              border: Border.all(
                                  width: 1, color: Color(0xff999999)),
                              borderRadius: BorderRadius.circular(
                                ScreenUtil.getInstance().setWidth(60),
                              )),
                          width: ScreenUtil.getInstance().setWidth(400),
                          height: ScreenUtil.getInstance().setHeight(108),
                          child: Text(
                            "Add to Cart",
                            style: TextStyle(
                                fontSize: ScreenUtil.getInstance().setSp(36),
                                color: BLACK_33),
                          ),
                        ),
                        onTap: () {
                          _listener?.addToCart(_codes[_currentIndex], _count);
                          hide();
                        },
                      ),
                      SizedBox(
                        width: ScreenUtil.getInstance().setWidth(48),
                      ),
                      GestureDetector(
                        child: Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: RED_C6,
                              borderRadius: BorderRadius.circular(
                                ScreenUtil.getInstance().setWidth(60),
                              )),
                          width: ScreenUtil.getInstance().setWidth(400),
                          height: ScreenUtil.getInstance().setHeight(108),
                          child: Text(
                            "Buy Now",
                            style: TextStyle(
                                fontSize: ScreenUtil.getInstance().setSp(36),
                                color: Colors.white),
                          ),
                        ),
                        onTap: () {
                          _listener?.buyNow(_codes[_currentIndex], _count);
                          hide();
                        },
                      ),
                    ],
                  )
          ],
        ),
        padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(48)),
      );
    });
  }

  show() async {
    if (showing) {
      return;
    }
    showing = true;
    await showModalBottomSheet(
        context: _context,
        builder: (BuildContext context) {
          return this;
        }).then((val) {
      showing = false;
      if (_type == PropertyType.TWO) {
        _listener?.currentSelect(
            _colors[_currentIndex], _codes[_currentIndex], _count);
      }
    });
  }

  hide() {
    showing = false;
    try {
      Navigator.of(_context).pop();
    } catch (_) {}
  }

  isShowing() {
    return showing;
  }

  List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }

    return result;
  }

  Widget getItemContainer(String color, int index) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setWidth(30), 0,
          ScreenUtil.getInstance().setWidth(30), 0),
      alignment: Alignment.center,
      child: Text(
        color,
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.center,
        style: TextStyle(
            color: BLACK_33, fontSize: ScreenUtil.getInstance().setSp(36)),
      ),
      decoration: BoxDecoration(
          color: Color(
            0xfff5f5f5,
          ),
          borderRadius: BorderRadius.circular(100)),
    );
  }
}

abstract class PropertyDialogClickListener {
  void addToCart(String code, int count);

  void buyNow(String code, int count);

  void currentSelect(String color, String code, int count);
}

enum PropertyType { CART, TWO, DEAL }


https://book.flutterchina.club/chapter7/dailog.html

相关文章

网友评论

      本文标题:Flutter 实现透明dialog和日历

      本文链接:https://www.haomeiwen.com/subject/oudauctx.html