使用 Material 的 ShowDialog 组件自定义弹窗

  1. void showComfirm(BuildContext context, String msg,
  2.     {Function comfirm,
  3.     Function cancel,
  4.     String comfirmTitle = '确认',
  5.     String cancelTitle = '取消'}) {
  6.   showDialog(
  7.       context: context,
  8.       builder: (BuildContext context) {
  9.         return CustomDialog(
  10.           backgroundColor: Color(0xffffffff),
  11.           shape: RoundedRectangleBorder(
  12.               borderRadius:
  13.                   BorderRadius.circular(ScreenUtil.getInstance().setSize(16))),
  14.           minWidth: ScreenUtil.getInstance().setSize(480),
  15.           maxWidth: ScreenUtil.getInstance().setSize(480),
  16.           minHeight: ScreenUtil.getInstance().setSize(240),
  17.           child: Column(
  18.             mainAxisAlignment: MainAxisAlignment.start,
  19.             crossAxisAlignment: CrossAxisAlignment.center,
  20.             mainAxisSize: MainAxisSize.min,
  21.             children: <Widget>[
  22.               Container(
  23.                 constraints: BoxConstraints(
  24.                   minHeight: ScreenUtil.getInstance().setSize(150),
  25.                 ),
  26.                 decoration: BoxDecoration(
  27.                     border: Border(
  28.                         bottom: BorderSide(
  29.                   color: kLingyiGray,
  30.                   width: ScreenUtil.getInstance().setSize(1),
  31.                 ))),
  32.                 width: ScreenUtil.getInstance().setSize(480),
  33.                 padding: EdgeInsets.fromLTRB(
  34.                     ScreenUtil.getInstance().setSize(34),
  35.                     ScreenUtil.getInstance().setSize(34),
  36.                     ScreenUtil.getInstance().setSize(34),
  37.                     ScreenUtil.getInstance().setSize(34)),
  38.                 child: Text(
  39.                   msg,
  40.                   style: TextStyle(
  41.                       fontSize: ScreenUtil.getInstance().setSp(32),
  42.                       color: kLingyiText500),
  43.                 ),
  44.               ),
  45.               Container(
  46.                 height: ScreenUtil.getInstance().setSize(88),
  47.                 child: Flex(
  48.                   direction: Axis.horizontal,
  49.                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
  50.                   crossAxisAlignment: CrossAxisAlignment.center,
  51.                   children: <Widget>[
  52.                     Expanded(
  53.                         flex: 1,
  54.                         child: GestureDetector(
  55.                           onTap: () {
  56.                             Navigator.of(context).pop();
  57.                             if (cancel != null) cancel();
  58.                           },
  59.                           child: Text(
  60.                             cancelTitle,
  61.                             style: TextStyle(
  62.                                 fontSize: ScreenUtil.getInstance().setSp(28),
  63.                                 color: Color(0xff999999)),
  64.                             textAlign: TextAlign.center,
  65.                           ),
  66.                         )),
  67.                     Container(
  68.                       width: ScreenUtil.getInstance().setSize(1),
  69.                       height: ScreenUtil.getInstance().setSize(88),
  70.                       color: kLingyiGray,
  71.                     ),
  72.                     Expanded(
  73.                         flex: 1,
  74.                         child: GestureDetector(
  75.                           onTap: () {
  76.                             Navigator.of(context).pop();
  77.                             if (comfirm != null) comfirm();
  78.                           },
  79.                           child: Text(
  80.                             comfirmTitle,
  81.                             style: TextStyle(
  82.                                 fontSize: ScreenUtil.getInstance().setSp(28),
  83.                                 color: Color(0xff4499ff)),
  84.                             textAlign: TextAlign.center,
  85.                           ),
  86.                         ))
  87.                   ],
  88.                 ),
  89.               ),
  90.             ],
  91.           ),
  92.         );
  93.       });
  94. }
  96. void showAlert(BuildContext context, String msg,
  97.     {Function callback, String comfirmTitle = '确认'}) {
  98.   showDialog(
  99.       context: context,
  100.       builder: (BuildContext context) {
  101.         return CustomDialog(
  102.           backgroundColor: Color(0xffffffff),
  103.           shape: RoundedRectangleBorder(
  104.               borderRadius:
  105.                   BorderRadius.circular(ScreenUtil.getInstance().setSize(16))),
  106.           minWidth: ScreenUtil.getInstance().setSize(480),
  107.           maxWidth: ScreenUtil.getInstance().setSize(480),
  108.           minHeight: ScreenUtil.getInstance().setSize(240),
  109.           child: Column(
  110.             mainAxisAlignment: MainAxisAlignment.start,
  111.             crossAxisAlignment: CrossAxisAlignment.center,
  112.             mainAxisSize: MainAxisSize.min,
  113.             children: <Widget>[
  114.               Container(
  115.                 constraints: BoxConstraints(
  116.                   minHeight: ScreenUtil.getInstance().setSize(150),
  117.                 ),
  118.                 width: ScreenUtil.getInstance().setSize(480),
  119.                 decoration: BoxDecoration(
  120.                     border: Border(
  121.                         bottom: BorderSide(
  122.                   color: kLingyiGray,
  123.                   width: ScreenUtil.getInstance().setSize(1),
  124.                 ))),
  125.                 padding: EdgeInsets.fromLTRB(
  126.                     ScreenUtil.getInstance().setSize(34),
  127.                     ScreenUtil.getInstance().setSize(34),
  128.                     ScreenUtil.getInstance().setSize(34),
  129.                     ScreenUtil.getInstance().setSize(34)),
  130.                 child: Text(
  131.                   msg,
  132.                   style: TextStyle(
  133.                       fontSize: ScreenUtil.getInstance().setSp(32),
  134.                       color: kLingyiText500),
  135.                   textAlign: TextAlign.center,
  136.                 ),
  137.               ),
  138.               GestureDetector(
  139.                 onTap: () {
  140.                   Navigator.of(context).pop();
  141.                   if (callback != null) callback();
  142.                 },
  143.                 child: Container(
  144.                   height: ScreenUtil.getInstance().setSize(88),
  145.                   alignment: Alignment.center,
  146.                   child: Text(
  147.                     comfirmTitle,
  148.                     style: TextStyle(
  149.                         fontSize: ScreenUtil.getInstance().setSp(28),
  150.                         color: Color(0xff4499ff)),
  151.                   ),
  152.                 ),
  153.               )
  154.             ],
  155.           ),
  156.         );
  157.       });
  158. }
  160. void showToast(BuildContext context, String msg,
  161.     {Function callback, int duration = 1500, bool isSuccess = true}) {
  162.   Timer(Duration(milliseconds: duration), () {
  163.     Navigator.pop(context);
  164.     if (callback != null) callback();
  165.   });
  166.   customShowDialog(
  167.       context: context,
  168.       barrierDismissible: false,
  169.       barrierColor: Color(0x00ffffff),
  170.       builder: (BuildContext context) {
  171.         return CustomDialog(
  172.             backgroundColor: Color(0x88000000),
  173.             shape: RoundedRectangleBorder(
  174.                 borderRadius: BorderRadius.circular(
  175.                     ScreenUtil.getInstance().setSize(12))),
  176.             elevation: 0,
  177.             child: Padding(
  178.               padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
  179.               child: Column(
  180.                 mainAxisAlignment: MainAxisAlignment.center,
  181.                 crossAxisAlignment: CrossAxisAlignment.center,
  182.                 mainAxisSize: MainAxisSize.min,
  183.                 children: <Widget>[
  184.                   Icon(
  185.                     isSuccess ? Icons.done : Icons.error,
  186.                     size: ScreenUtil.getInstance().setSize(80),
  187.                     color: kLingyiWhite,
  188.                   ),
  189.                   SizedBox(
  190.                     height: ScreenUtil.getInstance().setSize(20),
  191.                   ),
  192.                   Text(
  193.                     msg,
  194.                     style: TextStyle(
  195.                         color: kLingyiWhite,
  196.                         fontSize: ScreenUtil.getInstance().setSp(28)),
  197.                     textAlign: TextAlign.center,
  198.                     maxLines: 3,
  199.                     overflow: TextOverflow.ellipsis,
  200.                   )
  201.                 ],
  202.               ),
  203.             ));
  204.       });
  205. }
  207. void showMsg(BuildContext context, String msg,
  208.     {int duration = 1500, Function callback}) {
  209.   Timer(Duration(milliseconds: duration), () {
  210.     Navigator.of(context).pop();
  211.     if (callback != null) callback();
  212.   });
  213.   customShowDialog(
  214.       context: context,
  215.       barrierDismissible: false,
  216.       barrierColor: Color(0x00ffffff),
  217.       builder: (BuildContext context) {
  218.         return CustomDialog(
  219.             backgroundColor: Color(0x88000000),
  220.             shape: RoundedRectangleBorder(
  221.                 borderRadius:
  222.                     BorderRadius.circular(ScreenUtil.getInstance().setSize(8))),
  223.             elevation: 0,
  224.             minWidth: ScreenUtil.getInstance().setSize(300),
  225.             maxWidth: ScreenUtil.getInstance().setSize(650),
  226.             minHeight: ScreenUtil.getInstance().setSize(64),
  227.             child: Stack(
  228.               alignment: Alignment.center,
  229.               children: <Widget>[
  230.                 Padding(
  231.                   padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
  232.                   child: Text(
  233.                     msg,
  234.                     style: TextStyle(
  235.                         color: kLingyiWhite,
  236.                         fontSize: ScreenUtil.getInstance().setSp(28)),
  237.                     textAlign: TextAlign.center,
  238.                     maxLines: 2,
  239.                     overflow: TextOverflow.ellipsis,
  240.                   ),
  241.                 )
  242.               ],
  243.             ));
  244.       });
  245. }
  246. class CustomDialog extends StatelessWidget {
  247.   const CustomDialog({
  248.     Key key,
  249.     this.backgroundColor,
  250.     this.elevation,
  251.     this.insetAnimationDuration = const Duration(milliseconds: 100),
  252.     this.insetAnimationCurve = Curves.decelerate,
  253.     this.shape,
  254.     this.child,
  255.     this.minWidth,
  256.     this.maxWidth,
  257.     this.minHeight,
  258.     this.maxHeight,
  259.   }) : super(key: key);
  260.   final Color backgroundColor;
  261.   final double elevation;
  262.   final Duration insetAnimationDuration;
  263.   final Curve insetAnimationCurve;
  264.   final ShapeBorder shape;
  265.   final Widget child;
  266.   final double minWidth;
  267.   final double maxWidth;
  268.   final double minHeight;
  269.   final double maxHeight;
  270.   static const RoundedRectangleBorder _defaultDialogShape =
  271.       RoundedRectangleBorder(
  272.           borderRadius: BorderRadius.all(Radius.circular(2.0)));
  273.   static const double _defaultElevation = 24.0;
  275.   @override
  276.   Widget build(BuildContext context) {
  277.     final DialogTheme dialogTheme = DialogTheme.of(context);
  278.     return AnimatedPadding(
  279.       padding: MediaQuery.of(context).viewInsets +
  280.           const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
  281.       duration: insetAnimationDuration,
  282.       curve: insetAnimationCurve,
  283.       child: MediaQuery.removeViewInsets(
  284.         removeLeft: true,
  285.         removeTop: true,
  286.         removeRight: true,
  287.         removeBottom: true,
  288.         context: context,
  289.         child: Center(
  290.           child: ConstrainedBox(
  291.             constraints: BoxConstraints(
  292.               minWidth: minWidth ?? ScreenUtil.getInstance().setSize(200),
  293.               minHeight: minHeight ?? ScreenUtil.getInstance().setSize(200),
  294.               maxWidth: maxWidth ?? ScreenUtil.getInstance().setSize(600),
  295.               maxHeight: maxWidth ?? ScreenUtil.getInstance().setSize(600),
  296.             ),
  297.             child: Material(
  298.               color: backgroundColor ??
  299.                   dialogTheme.backgroundColor ??
  300.                   Theme.of(context).dialogBackgroundColor,
  301.               elevation:
  302.                   elevation ?? dialogTheme.elevation ?? _defaultElevation,
  303.               shape: shape ?? dialogTheme.shape ?? _defaultDialogShape,
  304.               type: MaterialType.card,
  305.               child: child,
  306.             ),
  307.           ),
  308.         ),
  309.       ),
  310.     );
  311.   }
  312. }
  314. Future<T> customShowDialog<T>({
  315.   @required
  316.       BuildContext context,
  317.   bool barrierDismissible = true,
  318.   Color barrierColor = Colors.black54,
  319.   @Deprecated(
  320.       'Instead of using the "child" argument, return the child from a closure '
  321.       'provided to the "builder" argument. This will ensure that the BuildContext '
  322.       'is appropriate for widgets built in the dialog.')
  323.       Widget child,
  324.   WidgetBuilder builder,
  325. }) {
  326.   assert(child == null || builder == null);
  327.   assert(debugCheckHasMaterialLocalizations(context));
  329.   final ThemeData theme = Theme.of(context, shadowThemeOnly: true);
  330.   return showGeneralDialog(
  331.     context: context,
  332.     pageBuilder: (BuildContext buildContext, Animation<double> animation,
  333.         Animation<double> secondaryAnimation) {
  334.       final Widget pageChild = child ?? Builder(builder: builder);
  335.       return SafeArea(
  336.         child: Builder(builder: (BuildContext context) {
  337.           return theme != null
  338.               ? Theme(data: theme, child: pageChild)
  339.               : pageChild;
  340.         }),
  341.       );
  342.     },
  343.     barrierDismissible: barrierDismissible,
  344.     barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
  345.     barrierColor: barrierColor,
  346.     transitionDuration: const Duration(milliseconds: 150),
  347.     transitionBuilder: _buildMaterialDialogTransitions,
  348.   );
  349. }
  351. Widget _buildMaterialDialogTransitions(
  352.     BuildContext context,
  353.     Animation<double> animation,
  354.     Animation<double> secondaryAnimation,
  355.     Widget child) {
  356.   return FadeTransition(
  357.     opacity: CurvedAnimation(
  358.       parent: animation,
  359.       curve: Curves.easeOut,
  360.     ),
  361.     child: child,
  362.   );
  363. }

使用 Material 的 OverlayEntry组件自定义弹窗

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter/widgets.dart';
  3. import 'package:lingyi/config/color.dart';
  5. class ShowMsg {
  6.   static void show(BuildContext context, String msg ,{
  7.       int duration = 1500,
  8.       int gravity = 1,
  9.       Color backgroundColor = const Color(0x88000000),
  10.       Color textColor = Colors.white,
  11.       double backgroundRadius,
  12.       Border border,
  13.       Function callback
  14.     }) {
  15.     MsgView.dismiss();
  16.     ToastView.dismiss();
  17.     MsgView.createView(
  18.         msg, context, duration, gravity, backgroundColor, textColor, backgroundRadius, border, callback);
  19.   }
  20. }
  22. class MsgView {
  23.   static final MsgView _singleton = new MsgView._internal();
  24.   factory MsgView() {
  25.     return _singleton;
  26.   }
  27.   MsgView._internal();
  28.   static OverlayState overlayState;
  29.   static OverlayEntry _overlayEntry;
  30.   static bool _isVisible = false;
  31.   static void createView(String msg, BuildContext context, int duration, int gravity,
  32.       Color background, Color textColor, double backgroundRadius, Border border, Function callback) async {
  33.     overlayState = Overlay.of(context);
  35.     _overlayEntry = new OverlayEntry(
  36.       builder: (BuildContext context) => PositionWidget(
  37.           widget: Container(
  38.             width: MediaQuery.of(context).size.width,
  39.             child: Container(
  40.                 alignment: Alignment.center,
  41.                 width: MediaQuery.of(context).size.width,
  42.                 child: Container(
  43.                   decoration: BoxDecoration(
  44.                     color: background,
  45.                     borderRadius: BorderRadius.circular(backgroundRadius ?? ScreenUtil.getInstance().setSize(8)),
  46.                     border: border,
  47.                   ),
  48.                   constraints: BoxConstraints(
  49.                     minWidth: ScreenUtil.getInstance().setSize(300),
  50.                     maxWidth: ScreenUtil.getInstance().setSize(650),
  51.                     minHeight: ScreenUtil.getInstance().setSize(64),
  52.                   ),
  53.                   margin: EdgeInsets.symmetric(horizontal: 20),
  54.                   padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
  55.                   child: Stack(
  56.                     alignment: Alignment.center,
  57.                     children: <Widget>[
  58.                       Text(msg, softWrap: true, style: TextStyle(fontSize: ScreenUtil.getInstance().setSize(28), color: textColor)),
  59.                     ]
  60.                   )
  61.                 )),
  62.           ),
  63.           gravity: gravity),
  64.     );
  65.     _isVisible = true;
  66.     overlayState.insert(_overlayEntry);
  67.     await new Future.delayed(Duration(milliseconds: duration ?? 2000));
  68.     if(callback != null) callback();
  69.     dismiss();
  70.   }
  72.   static dismiss() async {
  73.     if (!_isVisible) {
  74.       return;
  75.     }
  76.     _isVisible = false;
  77.     _overlayEntry?.remove();
  78.   }
  79. }
  81. class PositionWidget extends StatelessWidget {
  82.   PositionWidget({
  83.     Key key,
  84.     @required this.widget,
  85.     @required this.gravity,
  86.   }) : super(key: key);
  88.   final Widget widget;
  89.   final int gravity;
  90.   @override
  91.   Widget build(BuildContext context) {
  92.     return new Positioned(
  93.         top: gravity == 2 ? 50 : null,
  94.         bottom: gravity == 0 ? 50 : null,
  95.         child: Material(
  96.           color: Colors.transparent,
  97.           child: widget,
  98.         ));
  99.   }
  100. }
  102. // show Tost----------------------------------------------
  103. class ShowToast {
  104.   static void show(BuildContext context, String msg ,{
  105.       bool isSuccess = true,
  106.       int duration = 1500,
  107.       Color backgroundColor,
  108.       Color textColor = Colors.white,
  109.       double backgroundRadius,
  110.       Function callback
  111.     }) {
  112.     MsgView.dismiss();
  113.     ToastView.dismiss();
  114.     ToastView.createView(
  115.         msg, context, isSuccess, duration, backgroundColor, textColor, backgroundRadius, callback);
  116.   }
  117. }
  119. class ToastView {
  120.   static final ToastView _singleton = new ToastView._internal();
  121.   factory ToastView() {
  122.     return _singleton;
  123.   }
  124.   ToastView._internal();
  125.   static OverlayState overlayState;
  126.   static OverlayEntry _overlayEntry;
  127.   static bool _isVisible = false;
  128.   static void createView(String msg, BuildContext context, bool isSuccess, int duration, Color background, Color textColor, double backgroundRadius, Function callback) async {
  129.     overlayState = Overlay.of(context);
  131.     _overlayEntry = new OverlayEntry(
  132.       builder: (BuildContext context) => PositionWidget(
  133.           widget: Stack(
  134.             alignment: Alignment.center,
  135.             children: <Widget>[
  136.               Container(
  137.                 decoration: BoxDecoration(
  138.                   color: background ?? Color(0x88000000),
  139.                   borderRadius: BorderRadius.circular(backgroundRadius ?? ScreenUtil.getInstance().setSize(12))
  140.                 ),
  141.                 padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
  142.                 child: Column(
  143.                   mainAxisAlignment: MainAxisAlignment.center,
  144.                   crossAxisAlignment: CrossAxisAlignment.center,
  145.                   mainAxisSize: MainAxisSize.min,
  146.                   children: <Widget>[
  147.                     Icon(
  148.                       isSuccess ? Icons.done : Icons.error,
  149.                       size: ScreenUtil.getInstance().setSize(80),
  150.                       color: textColor,
  151.                     ),
  152.                     SizedBox(
  153.                       height: ScreenUtil.getInstance().setSize(10),
  154.                     ),
  155.                     Text(
  156.                       msg,
  157.                       style: TextStyle(
  158.                           color: textColor,
  159.                           fontSize: ScreenUtil.getInstance().setSp(28)),
  160.                       textAlign: TextAlign.center,
  161.                       maxLines: 3,
  162.                       overflow: TextOverflow.ellipsis,
  163.                     )
  164.                   ],
  165.                 ),
  166.               )
  167.             ],
  168.           ),
  169.           gravity: 1),
  170.     );
  171.     _isVisible = true;
  172.     overlayState.insert(_overlayEntry);
  173.     await new Future.delayed(Duration(milliseconds: duration ?? 2000));
  174.     if(callback != null) callback();
  175.     dismiss();
  176.   }
  178.   static dismiss() async {
  179.     if (!_isVisible) {
  180.       return;
  181.     }
  182.     _isVisible = false;
  183.     _overlayEntry?.remove();
  184.   }
  185. }
  187. // show Alert---------------------------------------------
  188. class ShowAlert {
  189.   static void show(BuildContext context, String msg ,{
  190.       Color backgroundColor,
  191.       double backgroundRadius,
  192.       bool showCancel: true,
  193.       String comfirmTitle: '确认',
  194.       String cancelTitle: '取消',
  195.       Function onConfirm,
  196.       Function onCancel
  197.     }) {
  198.     MsgView.dismiss();
  199.     ToastView.dismiss();
  200.     AlertView.dismiss();
  201.     AlertView.createView(msg, context, backgroundColor, backgroundRadius, showCancel, comfirmTitle, cancelTitle, onConfirm, onCancel);
  202.   }
  203. }
  205. class AlertView {
  206.   static final AlertView _singleton = new AlertView._internal();
  207.   factory AlertView() {
  208.     return _singleton;
  209.   }
  210.   AlertView._internal();
  211.   static OverlayState overlayState;
  212.   static OverlayEntry _overlayEntry;
  213.   static bool _isVisible = false;
  214.   static void createView(String msg, BuildContext context, Color backgroundColor, double backgroundRadius, bool showCancel, String comfirmTitle, String cancelTitle, Function onConfirm, Function onCancel) async {
  215.     overlayState = Overlay.of(context);
  217.     _overlayEntry = new OverlayEntry(
  218.       builder: (BuildContext context) => PositionWidget(
  219.           widget: Container(
  220.             color: Color(0x66000000),
  221.             child: Stack(
  222.               alignment: Alignment.center,
  223.               children: <Widget>[
  224.                 Container(
  225.                   decoration: BoxDecoration(
  226.                     color: backgroundColor ?? Colors.white,
  227.                     borderRadius: BorderRadius.circular(backgroundRadius ?? ScreenUtil.getInstance().setSize(16))
  228.                   ),
  229.                   constraints: BoxConstraints(
  230.                     minWidth: ScreenUtil.getInstance().setSize(480),
  231.                     maxWidth: ScreenUtil.getInstance().setSize(480),
  232.                     minHeight: ScreenUtil.getInstance().setSize(240),
  233.                   ),
  234.                   padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
  235.                   child: Column(
  236.                     mainAxisAlignment: MainAxisAlignment.start,
  237.                     crossAxisAlignment: CrossAxisAlignment.center,
  238.                     mainAxisSize: MainAxisSize.min,
  239.                     children: <Widget>[
  240.                       Container(
  241.                         constraints: BoxConstraints(
  242.                           minHeight: ScreenUtil.getInstance().setSize(150),
  243.                         ),
  244.                         decoration: BoxDecoration(
  245.                             border: Border(
  246.                                 bottom: BorderSide(
  247.                           color: kLingyiGray,
  248.                           width: ScreenUtil.getInstance().setSize(1),
  249.                         ))),
  250.                         width: ScreenUtil.getInstance().setSize(480),
  251.                         padding: EdgeInsets.fromLTRB(
  252.                             ScreenUtil.getInstance().setSize(34),
  253.                             ScreenUtil.getInstance().setSize(34),
  254.                             ScreenUtil.getInstance().setSize(34),
  255.                             ScreenUtil.getInstance().setSize(34)),
  256.                         child: Text(
  257.                           msg,
  258.                           style: TextStyle(
  259.                               fontSize: ScreenUtil.getInstance().setSp(32),
  260.                               color: kLingyiText500),
  261.                         ),
  262.                       ),
  263.                       Container(
  264.                         height: ScreenUtil.getInstance().setSize(88),
  265.                         child: !showCancel ?
  266.                           GestureDetector(
  267.                             onTap: () {
  268.                               dismiss();
  269.                               if (onConfirm != null) onConfirm();
  270.                             },
  271.                             child: Center(
  272.                               child: Text(
  273.                                 comfirmTitle,
  274.                                 style: TextStyle(
  275.                                     fontSize: ScreenUtil.getInstance().setSp(28),
  276.                                     color: Color(0xff4499ff)),
  277.                                 textAlign: TextAlign.center,
  278.                               )
  279.                             ),
  280.                           ) : Flex(
  281.                           direction: Axis.horizontal,
  282.                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
  283.                           crossAxisAlignment: CrossAxisAlignment.center,
  284.                           children: <Widget>[
  285.                             Expanded(
  286.                               flex: 1,
  287.                               child: GestureDetector(
  288.                                 onTap: () {
  289.                                   dismiss();
  290.                                   if (onCancel != null) onCancel();
  291.                                 },
  292.                                 child: Text(
  293.                                   cancelTitle,
  294.                                   style: TextStyle(
  295.                                       fontSize: ScreenUtil.getInstance().setSp(28),
  296.                                       color: Color(0xff999999)),
  297.                                   textAlign: TextAlign.center,
  298.                                 ),
  299.                               )
  300.                             ),
  301.                             Container(
  302.                               width: ScreenUtil.getInstance().setSize(1),
  303.                               height: ScreenUtil.getInstance().setSize(88),
  304.                               color: kLingyiGray,
  305.                             ),
  306.                             Expanded(
  307.                               flex: 1,
  308.                               child: GestureDetector(
  309.                                 onTap: () {
  310.                                   dismiss();
  311.                                   if (onConfirm != null) onConfirm();
  312.                                 },
  313.                                 child: Text(
  314.                                   comfirmTitle,
  315.                                   style: TextStyle(
  316.                                       fontSize: ScreenUtil.getInstance().setSp(28),
  317.                                       color: Color(0xff4499ff)),
  318.                                   textAlign: TextAlign.center,
  319.                                 ),
  320.                               )
  321.                             )
  322.                           ],
  323.                         ),
  324.                       ),
  325.                     ],
  326.                   ),
  327.                 )
  328.               ],
  329.             ),
  330.           ),
  331.           gravity: 1),
  332.     );
  333.     _isVisible = true;
  334.     overlayState.insert(_overlayEntry);
  335.   }
  337.   static dismiss() async {
  338.     if (!_isVisible) {
  339.       return;
  340.     }
  341.     _isVisible = false;
  342.     _overlayEntry?.remove();
  343.   }
  344. }

使用 Material 的 showModalBottomSheet 和 Cupertino 的 CupertinoPicker 制作底部抽屉选择器

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:annotation_route/route.dart';
  4. import 'package:lingyi/config/color.dart';
  5. import 'package:lingyi/route/route.dart';
  6. import 'package:lingyi/util/common.dart';
  8. @ARoute(url: 'page://health/medicine')
  9. class Medicine extends StatefulWidget {
  10.   final dynamic option;
  11.   Medicine(this.option);
  12.   @override
  13.   MedicineState createState() => MedicineState();
  14. }
  16. class MedicineState extends State<Medicine> {
  17.   bool isWork = true; // 是否提醒
  18.   List<Map> startList = [];
  19.   List<Map> endList = [];
  20.   List<Map> weekList = [{'isPick': false, 'showValue': '周一'},{'isPick': false, 'showValue': '周二'},{'isPick': false, 'showValue': '周三'},{'isPick': false, 'showValue': '周四'},{'isPick': false, 'showValue': '周五'},{'isPick': false, 'showValue': '周六'},{'isPick': false, 'showValue': '周日'},{'isPick': false, 'showValue': '每天'}];
  21.   List<String> durationList = ['7天','30天','90天','180天','365天',' 无期限','自定义'];
  22.   String startDate = '';
  23.   String endDate = '选择周期';
  24.   String currentWeek = '请选择';
  25.   String ringing = '默认铃声';
  26.   int pickDateIndex = 0; // 选择开始时间下标
  27.   int pickWeekIndex = 7; // 选择重复下标
  28.   int pickDurationIndex = -1; // 选择周期时间下标
  29.   int pickEndIndex = 0; // 选择自定义周期下标
  30.   int pickHourIndex = 0; // 选择自定义周期下标
  31.   int pickMinuteIndex = 0; // 选择自定义周期下标
  34.   // List<Map> clockList = [{'showValue': '08:00', 'value': 480}, {'showValue': '09:30', 'value': 570}]; // 提醒闹钟列表
  35.   List<Map> clockList = []; // 提醒闹钟列表
  36.   List<String> hourList = [];
  37.   List<String> minuteList = [];
  40.   FixedExtentScrollController startScrollCtr = new FixedExtentScrollController();
  41.   FixedExtentScrollController endScrollCtr = new FixedExtentScrollController();
  42.   FixedExtentScrollController hourScrollCtr = new FixedExtentScrollController();
  43.   FixedExtentScrollController minuteScrollCtr = new FixedExtentScrollController();
  45.   // 今天的时间
  46.   var today = new DateTime.now();
  48.   String formatDate(DateTime date) {
  49.     return date.year.toString() + '年' + date.month.toString() + '月' + date.day.toString() + '日 星期' + getWeekday(date.weekday);
  50.   }
  51.   String getWeekday(int num) {
  52.     switch(num) {
  53.       case 1:
  54.         return '一';
  55.         break;
  56.       case 2:
  57.         return '二';
  58.         break;
  59.       case 3:
  60.         return '三';
  61.         break;
  62.       case 4:
  63.         return '四';
  64.         break;
  65.       case 5:
  66.         return '五';
  67.         break;
  68.       case 6:
  69.         return '六';
  70.         break;
  71.       default:
  72.         return '日';
  73.         break;
  74.     }
  75.   }
  76.   void createStartDateList() {
  77.     for(int i = 0; i < 90; i++ ) {
  78.       var tempDay = today.add(new Duration(days: i));
  79.       Map tempObj = {'value': tempDay, 'showValue': formatDate(tempDay)};
  80.       startList.add(tempObj);
  81.     }
  82.     createEndDateList(today);
  83.     setState(() {
  84.       startDate = formatDate(today);
  85.     });
  86.   }
  87.   void createEndDateList(DateTime start) {
  88.     endList = [];
  89.     for(int i = 0; i < 366; i++) {
  90.       var tempDay = start.add(new Duration(days: i));
  91.       Map tempObj = {'value': tempDay, 'showValue': formatDate(tempDay)};
  92.       endList.add(tempObj);
  93.     }
  94.   }
  95.   void createHourList() {
  96.     for(int i = 0; i < 24; i++) {
  97.       hourList.add(i.toString().padLeft(2, '0'));
  98.     }
  99.   }
  100.   void createMinuteList() {
  101.     for(int i = 0; i < 60; i++) {
  102.       minuteList.add(i.toString().padLeft(2, '0'));
  103.     }
  104.   }
  106.   @override
  107.   void initState() {
  108.     super.initState();    
  109.     createStartDateList();
  110.     createHourList();
  111.     createMinuteList();
  112.   }
  114.   Iterable<Widget> get startDateItems sync* {
  115.     for(int i = 0, length = startList.length; i < length; i++) {
  116.       yield Container(
  117.         height: ScreenUtil.getInstance().setSize(80),
  118.         alignment: Alignment.center,
  119.         child: Text(startList[i]['showValue'], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(36), color: kLingyiText500)),
  120.       );
  121.     }
  122.   }
  123.   Iterable<Widget> get endDateItems sync* {
  124.     for(int i = 0, length = endList.length; i < length; i++) {
  125.       yield Container(
  126.         height: ScreenUtil.getInstance().setSize(80),
  127.         alignment: Alignment.center,
  128.         child: Text(endList[i]['showValue'], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(36), color: kLingyiText500)),
  129.       );
  130.     }
  131.   }
  132.   Iterable<Widget> get hourItems sync* {
  133.     for(int i = 0, length = hourList.length; i < length; i++) {
  134.       yield Container(
  135.         height: ScreenUtil.getInstance().setSize(80),
  136.         alignment: Alignment.center,
  137.         child: Text(hourList[i], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(36), color: kLingyiText500)),
  138.       );
  139.     }
  140.   }
  141.   Iterable<Widget> get minuteItems sync* {
  142.     for(int i = 0, length = minuteList.length; i < length; i++) {
  143.       yield Container(
  144.         height: ScreenUtil.getInstance().setSize(80),
  145.         alignment: Alignment.center,
  146.         child: Text(minuteList[i], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(36), color: kLingyiText500)),
  147.       );
  148.     }
  149.   }
  151.   void setCurrentWeek() {
  152.     // 判断是否是全选
  153.     if(weekList.last['isPick']) {
  154.       setState(() {
  155.         currentWeek = '每天';
  156.       });
  157.     }else {
  158.       var tempList = [];
  159.       weekList.forEach((value) {
  160.         if(value['isPick']) {
  161.           tempList.add(value['showValue']);
  162.         }
  163.       });
  164.       setState(() {
  165.         currentWeek = tempList.isEmpty ? '请选择' : tempList.join(',');
  166.       });
  167.     }
  168.   }
  170.   void setEndDate() {
  171.     var tempString = '';
  172.     switch(pickDurationIndex) {
  173.       case 0:
  174.         tempString = formatDate(startList[pickDateIndex]['value'].add(new Duration(days: 7)));
  175.         break;
  176.       case 1:
  177.         tempString = formatDate(startList[pickDateIndex]['value'].add(new Duration(days: 30)));
  178.         break;
  179.       case 2:
  180.         tempString = formatDate(startList[pickDateIndex]['value'].add(new Duration(days: 90)));
  181.         break;
  182.       case 3:
  183.         tempString = formatDate(startList[pickDateIndex]['value'].add(new Duration(days: 180)));
  184.         break;
  185.       case 4:
  186.         tempString = formatDate(startList[pickDateIndex]['value'].add(new Duration(days: 365)));
  187.         break;
  188.       case 5:
  189.         tempString = '无期限';
  190.         break;
  191.       default:
  192.         tempString = endList[pickEndIndex]['showValue'];
  193.         break;
  194.     }
  195.     setState(() {
  196.       endDate = tempString;
  197.     });
  198.   }
  200.   void showClockPick(int value, {int editIndex=-1}) {
  201.     // 初始化
  202.     pickHourIndex = 0;
  203.     pickMinuteIndex = 0;
  204.     int positionHour = value ~/ 60;
  205.     int positionMinute = value.remainder(60);
  206.     showModalBottomSheet(
  207.       context: context,
  208.       shape: RoundedRectangleBorder(
  209.         borderRadius: BorderRadius.only(
  210.           topLeft: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  211.           topRight: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  212.         )
  213.       ),
  214.       builder: (context) {
  215.         hourScrollCtr.jumpToItem(positionHour);
  216.         minuteScrollCtr.jumpToItem(positionMinute);
  217.         return Column(
  218.           mainAxisSize: MainAxisSize.min,
  219.           children: <Widget>[
  220.             Container(
  221.               height: ScreenUtil.getInstance().setSize(105),
  222.               alignment: Alignment.center,
  223.               decoration: BoxDecoration(
  224.                 color: kLingyiWhite,
  225.                 border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  226.               ),
  227.               child: Text('设置提醒', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange),),
  228.             ),
  229.             Row(
  230.               mainAxisAlignment: MainAxisAlignment.spaceAround,
  231.               children: <Widget>[
  232.                 Expanded(
  233.                   flex: 1,
  234.                   child: Container(
  235.                     height: ScreenUtil.getInstance().setSize(480),
  236.                     child: CupertinoPicker(
  237.                       itemExtent: ScreenUtil.getInstance().setSize(80),
  238.                       onSelectedItemChanged: (index) {
  239.                         pickHourIndex = index;
  240.                       },
  241.                       scrollController: hourScrollCtr,
  242.                       diameterRatio: 720.0,
  243.                       // 滚筒的曲率,就是弯曲的程度
  244.                       useMagnifier: true,
  245.                       magnification: 1.0,
  246.                       looping: true,
  247.                       backgroundColor: kLingyiWhite,
  248.                       offAxisFraction: 100.0,
  249.                       // 子项的偏移
  250.                       children: hourItems.toList(),
  251.                     )
  252.                   ),
  253.                 ),
  254.                 Expanded(
  255.                   flex: 1,
  256.                   child: Container(
  257.                     height: ScreenUtil.getInstance().setSize(480),
  258.                     child: CupertinoPicker(
  259.                       itemExtent: ScreenUtil.getInstance().setSize(80),
  260.                       onSelectedItemChanged: (index) {
  261.                         pickMinuteIndex = index;
  262.                       },
  263.                       scrollController: minuteScrollCtr,
  264.                       diameterRatio: 720.0,
  265.                       // 滚筒的曲率,就是弯曲的程度
  266.                       useMagnifier: true,
  267.                       magnification: 1.0,
  268.                       looping: true,
  269.                       backgroundColor: kLingyiWhite,
  270.                       offAxisFraction: 100.0,
  271.                       // 子项的偏移
  272.                       children: minuteItems.toList(),
  273.                     )
  274.                   ),
  275.                 )
  276.               ],
  277.             ),
  278.             Container(
  279.               height: ScreenUtil.getInstance().setSize(20),
  280.               color: kLingyiGray100,
  281.             ),
  282.             Container(
  283.               color: kLingyiWhite,
  284.               padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), 0, ScreenUtil.getInstance().setSize(36), 0),
  285.               child: Row(
  286.                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
  287.                 children: <Widget>[
  288.                   Expanded(
  289.                     flex: 1,
  290.                     child: GestureDetector(
  291.                       onTap: () {
  292.                         Navigator.pop(context);
  293.                       },
  294.                       child: Container(
  295.                         height: ScreenUtil.getInstance().setSize(90),
  296.                         decoration: BoxDecoration(
  297.                           border: Border(right: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  298.                         ),
  299.                         alignment: Alignment.center,
  300.                         child: Text('取消', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText100),),
  301.                       ),
  302.                     )
  303.                   ),
  304.                   Expanded(
  305.                     flex: 1,
  306.                     child: GestureDetector(
  307.                       onTap: () {
  308.                         int tempValue = pickHourIndex * 60 + pickMinuteIndex;
  309.                         for(int i = 0, length = clockList.length; i < length; i++) {
  310.                           if(clockList[i]['value'] == tempValue) {
  311.                             showMsg(context, '已设置相同时刻的提醒');
  312.                             return;
  313.                           }
  314.                         }
  315.                         // 判断是否是编辑
  316.                         if(editIndex > -1) {
  317.                           clockList.removeAt(editIndex);
  318.                         }
  319.                         Map tempClock = {
  320.                           'showValue': hourList[pickHourIndex] + ':' + minuteList[pickMinuteIndex],
  321.                           'value': tempValue
  322.                         };
  323.                         clockList.add(tempClock);
  324.                         // 按小到大排序
  325.                         sortClock();
  326.                         Navigator.pop(context);
  327.                       },
  328.                       child: Container(
  329.                         height: ScreenUtil.getInstance().setSize(100),
  330.                         alignment: Alignment.center,
  331.                         child: Text('确认', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiGreen),),
  332.                       ),
  333.                     )
  334.                   ),
  335.                 ],
  336.               ),
  337.             ),
  338.             Container(
  339.               color: kLingyiWhite,
  340.               height: ScreenUtil.bottomBarHeight,
  341.             )
  342.           ],
  343.         );
  344.       },
  345.     );
  346.   }
  348.   void sortClock() {
  349.     if (clockList == null || clockList.isEmpty) return;
  350.     clockList.sort((b, a) => b['value'].compareTo(a['value']));
  351.     setState(() {});
  352.   }
  354.   @override
  355.   Widget build(BuildContext context) {
  356.     return Scaffold(
  357.       appBar: AppBar(
  358.         title: Text(widget.option.query['name']!=null?widget.option.query['name']:'吃药'),
  359.         leading: goBackArr(context),
  360.         actions: <Widget>[
  361.           Container(
  362.             padding: EdgeInsets.only(right: 20),
  363.             alignment: Alignment.center,
  364.             child: MaterialButton(
  365.               onPressed: () async {
  366.                 showToast(context, '保存成功', isSuccess: true, callback: () {
  367.                   Navigator.pop(context);
  368.                 });
  369.               },
  370.               color: kLingyiGreen,
  371.               elevation: 0,
  372.               minWidth: 50,
  373.               height: 24,
  374.               child: Text('保存',
  375.                   style: TextStyle(
  376.                       fontSize: ScreenUtil.getInstance().setSize(24),
  377.                       color: kLingyiWhite)),
  378.             ),
  379.           ),
  380.         ],
  381.       ),
  382.       body: Container(
  383.         width: MediaQuery.of(context).size.width,
  384.         height: MediaQuery.of(context).size.height,
  385.         color: kLingyiGray100,
  386.         child: ListView(
  387.           children: <Widget>[
  388.             Container(
  389.               padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  390.               color: kLingyiWhite,
  391.               child: Container(
  392.                 height: ScreenUtil.getInstance().setSize(150),
  393.                 padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  394.                 decoration: BoxDecoration(
  395.                   border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  396.                 ),
  397.                 child: Row(
  398.                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
  399.                   children: <Widget>[
  400.                     CircleAvatar(
  401.                       backgroundColor: kLingyiGray400,
  402.                       radius: ScreenUtil.getInstance().setSize(45),
  403.                       backgroundImage: getAssetImage(widget.option.query['icon']!=null?widget.option.query['icon']:'2_health/t_drug.png'),
  404.                     ),
  405.                     SizedBox(
  406.                       width: ScreenUtil.getInstance().setSize(520),
  407.                       child: Text(widget.option.query['name']!=null?widget.option.query['name']:'吃药', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText500),),
  408.                     ),
  409.                     SizedBox(
  410.                       width: ScreenUtil.getInstance().setSize(30),
  411.                     )
  412.                     // nextPageArr()
  413.                   ],
  414.                 ),
  415.               )
  416.             ),
  417.             //  开始时间
  418.             GestureDetector(
  419.               onTap: () {
  420.                 showModalBottomSheet(
  421.                   context: context,
  422.                   shape: RoundedRectangleBorder(
  423.                     borderRadius: BorderRadius.only(
  424.                       topLeft: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  425.                       topRight: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  426.                     )
  427.                   ),
  428.                   builder: (context) {
  429.                     startScrollCtr.jumpToItem(pickDateIndex);
  430.                     return Column(
  431.                       mainAxisSize: MainAxisSize.min,
  432.                       children: <Widget>[
  433.                         Container(
  434.                           height: ScreenUtil.getInstance().setSize(105),
  435.                           alignment: Alignment.center,
  436.                           decoration: BoxDecoration(
  437.                             color: kLingyiWhite,
  438.                             border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  439.                           ),
  440.                           child: Text('开始时间', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange),),
  441.                         ),
  442.                         Container(
  443.                           height: ScreenUtil.getInstance().setSize(480),
  444.                           child: CupertinoPicker(
  445.                             itemExtent: ScreenUtil.getInstance().setSize(80),
  446.                             onSelectedItemChanged: (index) {
  447.                               pickDateIndex = index;
  448.                             },
  449.                             scrollController: startScrollCtr,
  450.                             diameterRatio: 720.0,
  451.                             // 滚筒的曲率,就是弯曲的程度
  452.                             useMagnifier: true,
  453.                             magnification: 1.0,
  454.                             looping: true,
  455.                             backgroundColor: kLingyiWhite,
  456.                             offAxisFraction: 100.0,
  457.                             // 子项的偏移
  458.                             children: startDateItems.toList(),
  459.                           )
  460.                         ),
  461.                         Container(
  462.                           height: ScreenUtil.getInstance().setSize(20),
  463.                           color: kLingyiGray100,
  464.                         ),
  465.                         Container(
  466.                           color: kLingyiWhite,
  467.                           padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), 0, ScreenUtil.getInstance().setSize(36), 0),
  468.                           child: Row(
  469.                             mainAxisAlignment: MainAxisAlignment.spaceBetween,
  470.                             children: <Widget>[
  471.                               Expanded(
  472.                                 flex: 1,
  473.                                 child: GestureDetector(
  474.                                   onTap: () {
  475.                                     Navigator.pop(context);
  476.                                   },
  477.                                   child: Container(
  478.                                     height: ScreenUtil.getInstance().setSize(90),
  479.                                     decoration: BoxDecoration(
  480.                                       border: Border(right: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  481.                                     ),
  482.                                     alignment: Alignment.center,
  483.                                     child: Text('取消', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText100),),
  484.                                   ),
  485.                                 )
  486.                               ),
  487.                               Expanded(
  488.                                 flex: 1,
  489.                                 child: GestureDetector(
  490.                                   onTap: () {
  491.                                     setState(() {
  492.                                       startDate = startList[pickDateIndex]['showValue'];
  493.                                     });
  494.                                     createEndDateList(startList[pickDateIndex]['value']);
  495.                                     Navigator.pop(context);
  496.                                   },
  497.                                   child: Container(
  498.                                     height: ScreenUtil.getInstance().setSize(100),
  499.                                     alignment: Alignment.center,
  500.                                     child: Text('确认', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiGreen),),
  501.                                   ),
  502.                                 )
  503.                               ),
  504.                             ],
  505.                           ),
  506.                         ),
  507.                         Container(
  508.                           color: kLingyiWhite,
  509.                           height: ScreenUtil.bottomBarHeight,
  510.                         )
  511.                       ],
  512.                     );
  513.                   },
  514.                 );
  515.               },
  516.               child: Container(
  517.                 padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  518.                 color: kLingyiWhite,
  519.                 child: Container(
  520.                   height: ScreenUtil.getInstance().setSize(100),
  521.                   padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  522.                   decoration: BoxDecoration(
  523.                     border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  524.                   ),
  525.                   child: Row(
  526.                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
  527.                     children: <Widget>[
  528.                       SizedBox(
  529.                         width: ScreenUtil.getInstance().setSize(150),
  530.                         child: Text('开始时间', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText500),),
  531.                       ),
  532.                       SizedBox(
  533.                         width: ScreenUtil.getInstance().setSize(460),
  534.                         child: Text(startDate, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange), textAlign: TextAlign.right,),
  535.                       ),
  536.                       nextPageArr()
  537.                     ],
  538.                   ),
  539.                 )
  540.               ),
  541.             ),
  543.             // 结束时间
  544.             GestureDetector(
  545.               onTap: () {
  546.                 showModalBottomSheet(
  547.                   context: context,
  548.                   shape: RoundedRectangleBorder(
  549.                     borderRadius: BorderRadius.only(
  550.                       topLeft: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  551.                       topRight: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  552.                     )
  553.                   ),
  554.                   builder: (context) {
  555.                     return StatefulBuilder(
  556.                       builder: (BuildContext context, setState) {
  557.                         endScrollCtr.jumpToItem(pickEndIndex);
  558.                         return Column(
  559.                           mainAxisSize: MainAxisSize.min,
  560.                           children: <Widget>[
  561.                             Container(
  562.                               height: ScreenUtil.getInstance().setSize(105),
  563.                               alignment: Alignment.center,
  564.                               decoration: BoxDecoration(
  565.                                 color: kLingyiWhite,
  566.                                 border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  567.                               ),
  568.                               child: Text('结束时间', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange),),
  569.                             ),
  570.                             Container(
  571.                               width: MediaQuery.of(context).size.height,
  572.                               height: ScreenUtil.getInstance().setSize(240),
  573.                               color: kLingyiWhite,
  574.                               padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), ScreenUtil.getInstance().setSize(30), ScreenUtil.getInstance().setSize(36), ScreenUtil.getInstance().setSize(30)),
  575.                               child: GridView.builder(
  576.                                 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  577.                                   crossAxisCount: 4,
  578.                                   childAspectRatio: 2,
  579.                                   crossAxisSpacing: 20,
  580.                                   mainAxisSpacing: ScreenUtil.getInstance().setSize(30),
  581.                                 ),
  582.                                 itemCount: durationList.length,
  583.                                 itemBuilder: (BuildContext context, int index) {
  584.                                   return GestureDetector(
  585.                                     onTap: () {
  586.                                       // setPickDurationIndex(index);
  587.                                       setState(() {
  588.                                         pickDurationIndex = index;
  589.                                       });
  590.                                     },
  591.                                     child: Container(
  592.                                       height: ScreenUtil.getInstance().setSize(72),
  593.                                       width: ScreenUtil.getInstance().setSize(145),
  594.                                       decoration: BoxDecoration(
  595.                                         borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(36)),
  596.                                         border: Border.all(color: (pickDurationIndex == index) ? kLingyiGreen : kLingyiGray, width: ScreenUtil.getInstance().setSize(1)),
  597.                                         color: (pickDurationIndex == index) ? kLingyiGreen : kLingyiWhite
  598.                                       ),
  599.                                       child: Stack(
  600.                                         alignment: Alignment.center,
  601.                                         children: <Widget>[
  602.                                           Text(durationList[index], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: (pickDurationIndex == index) ? kLingyiWhite : kLingyiText500),)
  603.                                         ],
  604.                                       ),
  605.                                     )
  606.                                   );
  607.                                 }
  608.                               )
  609.                             ),
  610.                             Offstage(
  611.                               offstage: pickDurationIndex != 6,
  612.                               child: Container(
  613.                                 height: ScreenUtil.getInstance().setSize(320),
  614.                                 child: CupertinoPicker(
  615.                                   itemExtent: ScreenUtil.getInstance().setSize(80),
  616.                                   onSelectedItemChanged: (index) {
  617.                                     pickEndIndex = index;
  618.                                   },
  619.                                   scrollController: endScrollCtr,
  620.                                   diameterRatio: 720.0,
  621.                                   // 滚筒的曲率,就是弯曲的程度
  622.                                   useMagnifier: true,
  623.                                   magnification: 1.0,
  624.                                   looping: true,
  625.                                   backgroundColor: kLingyiWhite,
  626.                                   offAxisFraction: 100.0,
  627.                                   // 子项的偏移
  628.                                   children: endDateItems.toList(),
  629.                                 )
  630.                               ),
  631.                             ),
  632.                             Container(
  633.                               height: ScreenUtil.getInstance().setSize(20),
  634.                               color: kLingyiGray100,
  635.                             ),
  636.                             Container(
  637.                               color: kLingyiWhite,
  638.                               padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), 0, ScreenUtil.getInstance().setSize(36), 0),
  639.                               child: Row(
  640.                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
  641.                                 children: <Widget>[
  642.                                   Expanded(
  643.                                     flex: 1,
  644.                                     child: GestureDetector(
  645.                                       onTap: () {
  646.                                         Navigator.pop(context);
  647.                                       },
  648.                                       child: Container(
  649.                                         height: ScreenUtil.getInstance().setSize(90),
  650.                                         decoration: BoxDecoration(
  651.                                           border: Border(right: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  652.                                         ),
  653.                                         alignment: Alignment.center,
  654.                                         child: Text('取消', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText100),),
  655.                                       ),
  656.                                     )
  657.                                   ),
  658.                                   Expanded(
  659.                                     flex: 1,
  660.                                     child: GestureDetector(
  661.                                       onTap: () {
  662.                                         setEndDate();
  663.                                         Navigator.pop(context);
  664.                                       },
  665.                                       child: Container(
  666.                                         height: ScreenUtil.getInstance().setSize(100),
  667.                                         alignment: Alignment.center,
  668.                                         child: Text('确认', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiGreen),),
  669.                                       ),
  670.                                     )
  671.                                   ),
  672.                                 ],
  673.                               ),
  674.                             ),
  675.                             Container(
  676.                               color: kLingyiWhite,
  677.                               height: ScreenUtil.bottomBarHeight,
  678.                             )
  679.                           ],
  680.                         );
  681.                       },
  682.                     );
  684.                   },
  685.                 );
  686.               },
  687.               child: Container(
  688.                 padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  689.                 color: kLingyiWhite,
  690.                 child: Container(
  691.                   height: ScreenUtil.getInstance().setSize(100),
  692.                   padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  693.                   decoration: BoxDecoration(
  694.                     border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  695.                   ),
  696.                   child: Row(
  697.                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
  698.                     children: <Widget>[
  699.                       SizedBox(
  700.                         width: ScreenUtil.getInstance().setSize(150),
  701.                         child: Text('结束时间', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText500),),
  702.                       ),
  703.                       SizedBox(
  704.                         width: ScreenUtil.getInstance().setSize(460),
  705.                         child: Text(endDate, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange), textAlign: TextAlign.right,),
  706.                       ),
  707.                       nextPageArr()
  708.                     ],
  709.                   ),
  710.                 ),
  711.               ),
  712.             ),
  714.             // 重复
  715.             GestureDetector(
  716.               onTap: () {
  717.                 showModalBottomSheet(
  718.                   context: context,
  719.                   shape: RoundedRectangleBorder(
  720.                     borderRadius: BorderRadius.only(
  721.                       topLeft: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  722.                       topRight: Radius.circular(ScreenUtil.getInstance().setSize(16)),
  723.                     )
  724.                   ),
  725.                   builder: (context) {
  726.                     return StatefulBuilder(
  727.                       builder: (BuildContext context, setState) {
  728.                         return Column(
  729.                           mainAxisSize: MainAxisSize.min,
  730.                           children: <Widget>[
  731.                             Container(
  732.                               height: ScreenUtil.getInstance().setSize(105),
  733.                               alignment: Alignment.center,
  734.                               decoration: BoxDecoration(
  735.                                 color: kLingyiWhite,
  736.                                 border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  737.                               ),
  738.                               child: Text('任务频率', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange),),
  739.                             ),
  740.                             Container(
  741.                               width: MediaQuery.of(context).size.height,
  742.                               height: ScreenUtil.getInstance().setSize(240),
  743.                               color: kLingyiWhite,
  744.                               padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), ScreenUtil.getInstance().setSize(30), ScreenUtil.getInstance().setSize(36), ScreenUtil.getInstance().setSize(30)),
  745.                               child: GridView.builder(
  746.                                 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  747.                                   crossAxisCount: 4,
  748.                                   childAspectRatio: 2,
  749.                                   crossAxisSpacing: 20,
  750.                                   mainAxisSpacing: ScreenUtil.getInstance().setSize(30),
  751.                                 ),
  752.                                 itemCount: weekList.length,
  753.                                 itemBuilder: (BuildContext context, int index) {
  754.                                   return GestureDetector(
  755.                                     onTap: () {
  756.                                       weekList[index]['isPick'] = !weekList[index]['isPick'];
  757.                                       if(index == weekList.length-1) {
  758.                                         // 全选与反选
  759.                                         for(int i = 0, length = weekList.length-1; i < length; i++) {
  760.                                           weekList[i]['isPick'] = weekList[index]['isPick'];
  761.                                         }
  762.                                       }else {
  763.                                         // 判断是否全选
  764.                                         if(weekList[index]['isPick']) {
  765.                                           weekList.last['isPick'] = true;
  766.                                           for(int i = 0, length = weekList.length-1; i < length; i++) {
  767.                                             if(!weekList[i]['isPick']) {
  768.                                               weekList.last['isPick'] = false;
  769.                                               break;
  770.                                             }
  771.                                           }
  772.                                         }else {
  773.                                           weekList.last['isPick'] = false;
  774.                                         }
  775.                                       }
  776.                                       setState(() {});
  777.                                     },
  778.                                     child: Container(
  779.                                       height: ScreenUtil.getInstance().setSize(72),
  780.                                       padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), 0, ScreenUtil.getInstance().setSize(36), 0),
  781.                                       decoration: BoxDecoration(
  782.                                         borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(36)),
  783.                                         border: Border.all(color: weekList[index]['isPick'] ? kLingyiGreen : kLingyiGray, width: ScreenUtil.getInstance().setSize(1)),
  784.                                         color: weekList[index]['isPick'] ? kLingyiGreen : kLingyiWhite
  785.                                       ),
  786.                                       child: Stack(
  787.                                         alignment: Alignment.center,
  788.                                         children: <Widget>[
  789.                                           Text(weekList[index]['showValue'], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: weekList[index]['isPick'] ? kLingyiWhite : kLingyiText500),)
  790.                                         ],
  791.                                       ),
  792.                                     )
  793.                                   );
  794.                                 }
  795.                               )
  796.                             ),
  797.                             Container(
  798.                               height: ScreenUtil.getInstance().setSize(100),
  799.                               color: kLingyiGray100,
  800.                               alignment: Alignment.center,
  801.                               child: RichText(
  802.                                 text: TextSpan(
  803.                                   children: [
  804.                                     TextSpan(
  805.                                       text: '由',
  806.                                       style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText100),
  807.                                     ),
  808.                                     TextSpan(
  809.                                       text: startDate,
  810.                                       style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiOrange),
  811.                                     ),
  812.                                     TextSpan(
  813.                                       text: '开始，每天坚持',
  814.                                       style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText100),
  815.                                     ),
  816.                                   ]
  817.                                 ),
  818.                               ),
  819.                             ),
  820.                             Container(
  821.                               color: kLingyiWhite,
  822.                               padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setSize(36), 0, ScreenUtil.getInstance().setSize(36), 0),
  823.                               child: Row(
  824.                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
  825.                                 children: <Widget>[
  826.                                   Expanded(
  827.                                     flex: 1,
  828.                                     child: GestureDetector(
  829.                                       onTap: () {
  830.                                         Navigator.pop(context);
  831.                                       },
  832.                                       child: Container(
  833.                                         height: ScreenUtil.getInstance().setSize(90),
  834.                                         decoration: BoxDecoration(
  835.                                           border: Border(right: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  836.                                         ),
  837.                                         alignment: Alignment.center,
  838.                                         child: Text('取消', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText100),),
  839.                                       ),
  840.                                     )
  841.                                   ),
  842.                                   Expanded(
  843.                                     flex: 1,
  844.                                     child: GestureDetector(
  845.                                       onTap: () {
  846.                                         setCurrentWeek();
  847.                                         Navigator.pop(context);
  848.                                       },
  849.                                       child: Container(
  850.                                         height: ScreenUtil.getInstance().setSize(100),
  851.                                         alignment: Alignment.center,
  852.                                         child: Text('确认', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiGreen),),
  853.                                       ),
  854.                                     )
  855.                                   ),
  856.                                 ],
  857.                               ),
  858.                             ),
  859.                             Container(
  860.                               color: kLingyiWhite,
  861.                               height: ScreenUtil.bottomBarHeight,
  862.                             )
  863.                           ],
  864.                         );
  865.                       }
  866.                     );
  867.                   },
  868.                 );
  869.               },
  870.               child: Container(
  871.                 padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  872.                 color: kLingyiWhite,
  873.                 child: Container(
  874.                   height: ScreenUtil.getInstance().setSize(100),
  875.                   padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  876.                   decoration: BoxDecoration(
  877.                     border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  878.                   ),
  879.                   child: Row(
  880.                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
  881.                     children: <Widget>[
  882.                       SizedBox(
  883.                         width: ScreenUtil.getInstance().setSize(150),
  884.                         child: Text('重复', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText500),),
  885.                       ),
  886.                       SizedBox(
  887.                         width: ScreenUtil.getInstance().setSize(460),
  888.                         child: Text(currentWeek, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText500), textAlign: TextAlign.right,),
  889.                       ),
  890.                       nextPageArr()
  891.                     ],
  892.                   ),
  893.                 ),
  894.               ),
  895.             ),
  898.             // 提醒
  899.             Container(
  900.               padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  901.               color: kLingyiWhite,
  902.               child: Container(
  903.                 height: ScreenUtil.getInstance().setSize(100),
  904.                 padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  905.                 child: Row(
  906.                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
  907.                   children: <Widget>[
  908.                     SizedBox(
  909.                       width: ScreenUtil.getInstance().setSize(150),
  910.                       child: Text('提醒', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText500),),
  911.                     ),
  912.                     CupertinoSwitch(
  913.                       value: isWork,
  914.                       onChanged: (value) async {
  915.                         setState(() {
  916.                           isWork = value;
  917.                         });
  918.                       }
  919.                     ),
  920.                   ],
  921.                 ),
  922.               ),
  923.             ),
  924.             Container(
  925.               padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  926.               color: kLingyiWhite,
  927.               child: Container(
  928.                 height: ScreenUtil.getInstance().setSize(clockList.length < 5 ? 120 : 240),
  929.                 padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(12)),
  930.                 decoration: BoxDecoration(
  931.                   border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  932.                 ),
  933.                 child: GridView.builder(
  934.                   padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(24)),
  935.                   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  936.                     crossAxisCount: 5,
  937.                     childAspectRatio: 2,
  938.                     crossAxisSpacing: 10,
  939.                     mainAxisSpacing: ScreenUtil.getInstance().setSize(30),
  940.                   ),
  941.                   itemCount: clockList.length+1,
  942.                   itemBuilder: (BuildContext context, int index) {
  943.                     if(index < clockList.length) {
  944.                       return GestureDetector(
  945.                         onTap: () {
  946.                           showClockPick(clockList[index]['value'], editIndex: index);
  947.                         },  
  948.                           child: Container(
  949.                           padding: EdgeInsets.only(top: ScreenUtil.getInstance().setSize(12)),
  950.                           width: ScreenUtil.getInstance().setSize(120),
  951.                           child: Stack(
  952.                             overflow: Overflow.visible,
  953.                             children: <Widget>[
  954.                               Positioned(
  955.                                 left: 0,
  956.                                 top: 0,
  957.                                 width: ScreenUtil.getInstance().setSize(120),
  958.                                 height: ScreenUtil.getInstance().setSize(76),
  959.                                 child: Container(
  960.                                   width: ScreenUtil.getInstance().setSize(120),
  961.                                   height: ScreenUtil.getInstance().setSize(76),
  962.                                   decoration: BoxDecoration(
  963.                                     color: Color(0xfff5f5f5),
  964.                                     borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(8))
  965.                                   ),
  966.                                   child: Stack(
  967.                                     alignment: Alignment.center,
  968.                                     children: <Widget>[
  969.                                       Text(clockList[index]['showValue'], style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText500),)
  970.                                     ],
  971.                                   ),
  972.                                 ),
  973.                               ),
  974.                               Positioned(
  975.                                 right: ScreenUtil.getInstance().setSize(-12),
  976.                                 top: ScreenUtil.getInstance().setSize(-12),
  977.                                 width: ScreenUtil.getInstance().setSize(36),
  978.                                 height: ScreenUtil.getInstance().setSize(36),
  979.                                 child: GestureDetector(
  980.                                   onTap: () {
  981.                                     // 删除对应闹钟
  982.                                     clockList.removeAt(index);
  983.                                     setState(() {});
  984.                                   },
  985.                                   child: CircleAvatar(
  986.                                     radius: ScreenUtil.getInstance().setSize(36),
  987.                                     backgroundColor: kLingyiGray300,
  988.                                     backgroundImage: getAssetImage('2_health/s_delete.png'),
  989.                                   )
  990.                                 ),
  991.                               )
  992.                             ],
  993.                           ),
  994.                         )
  995.                       );
  996.                     }else {
  997.                       return Offstage(
  998.                         offstage: clockList.length > 9,
  999.                         child: GestureDetector(
  1000.                           onTap: () {
  1001.                             showClockPick(0);
  1002.                           },
  1003.                           child: Container(
  1004.                             padding: EdgeInsets.only(top: ScreenUtil.getInstance().setSize(12)),
  1005.                             width: ScreenUtil.getInstance().setSize(120),
  1006.                             child: Stack(
  1007.                               overflow: Overflow.visible,
  1008.                               children: <Widget>[
  1009.                                 Positioned(
  1010.                                   left: 0,
  1011.                                   top: 0,
  1012.                                   width: ScreenUtil.getInstance().setSize(120),
  1013.                                   height: ScreenUtil.getInstance().setSize(76),
  1014.                                   child: Container(
  1015.                                     width: ScreenUtil.getInstance().setSize(120),
  1016.                                     height: ScreenUtil.getInstance().setSize(76),
  1017.                                     decoration: BoxDecoration(
  1018.                                       color: Color(0xfff5f5f5),
  1019.                                       borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(8))
  1020.                                     ),
  1021.                                     child: Stack(
  1022.                                       alignment: Alignment.center,
  1023.                                       children: <Widget>[
  1024.                                         Image(
  1025.                                           width: ScreenUtil.getInstance().setSize(32),
  1026.                                           height: ScreenUtil.getInstance().setSize(32),
  1027.                                           fit: BoxFit.cover,
  1028.                                           image: getAssetImage('2_health/i_add.png'),
  1029.                                         )
  1030.                                       ],
  1031.                                     ),
  1032.                                   ),
  1033.                                 ),
  1034.                               ],
  1035.                             ),
  1036.                           )
  1037.                         )
  1038.                       );
  1039.                     }
  1040.                   }
  1041.                 )
  1042.               ),
  1043.             ),
  1046.             // 提醒音
  1047.             GestureDetector(
  1048.               onTap: () async{
  1049.                 var res = await Navigator.of(context).push(
  1050.                   MaterialPageRoute(builder: (BuildContext context) {
  1051.                     return AppRoute.getPage('page://health/ringing', {});
  1052.                   })
  1053.                 );
  1054.                 if (res != null) {
  1055.                   print(res['info']);
  1056.                   setState(() {
  1057.                     ringing = res['info'];
  1058.                   });
  1059.                 }
  1060.               },
  1061.               child: Container(
  1062.                 padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  1063.                 color: kLingyiWhite,
  1064.                 child: Container(
  1065.                   height: ScreenUtil.getInstance().setSize(100),
  1066.                   padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  1067.                   decoration: BoxDecoration(
  1068.                     border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  1069.                   ),
  1070.                   child: Row(
  1071.                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
  1072.                     children: <Widget>[
  1073.                       SizedBox(
  1074.                         width: ScreenUtil.getInstance().setSize(150),
  1075.                         child: Text('提醒音', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText500),),
  1076.                       ),
  1077.                       SizedBox(
  1078.                         width: ScreenUtil.getInstance().setSize(460),
  1079.                         child: Text(ringing, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: kLingyiText500), textAlign: TextAlign.right,),
  1080.                       ),
  1081.                       nextPageArr()
  1082.                     ],
  1083.                   ),
  1084.                 ),
  1085.               ),
  1086.             )
  1089.             // 更多提醒方式
  1090.             // Container(
  1091.             //   padding: EdgeInsets.only(left: ScreenUtil.getInstance().setSize(36)),
  1092.             //   color: kLingyiWhite,
  1093.             //   child: Container(
  1094.             //     height: ScreenUtil.getInstance().setSize(100),
  1095.             //     padding: EdgeInsets.only(right: ScreenUtil.getInstance().setSize(36)),
  1096.             //     decoration: BoxDecoration(
  1097.             //       border: Border(bottom: BorderSide(color: kLingyiGray, width: ScreenUtil.getInstance().setSize(1)))
  1098.             //     ),
  1099.             //     child: Row(
  1100.             //       mainAxisAlignment: MainAxisAlignment.spaceBetween,
  1101.             //       children: <Widget>[
  1102.             //         SizedBox(
  1103.             //           width: ScreenUtil.getInstance().setSize(200),
  1104.             //           child: Text('更多提醒方式', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText500),),
  1105.             //         ),
  1106.             //         SizedBox(
  1107.             //           width: ScreenUtil.getInstance().setSize(410),
  1108.             //           child: Row(
  1109.             //             mainAxisAlignment: MainAxisAlignment.end,
  1110.             //             children: <Widget>[
  1111.             //               ClipRRect(
  1112.             //                 borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(8)),
  1113.             //                 child: Image(
  1114.             //                   width: ScreenUtil.getInstance().setSize(48), 
  1115.             //                   height: ScreenUtil.getInstance().setSize(48),
  1116.             //                   image: getAssetImage('default.png'),
  1117.             //                   fit: BoxFit.cover,
  1118.             //                 ),
  1119.             //               ),
  1120.             //               SizedBox(width: ScreenUtil.getInstance().setSize(24),),
  1121.             //               ClipRRect(
  1122.             //                 borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(8)),
  1123.             //                 child: Image(
  1124.             //                   width: ScreenUtil.getInstance().setSize(48), 
  1125.             //                   height: ScreenUtil.getInstance().setSize(48),
  1126.             //                   image: getAssetImage('default.png'),
  1127.             //                   fit: BoxFit.cover,
  1128.             //                 ),
  1129.             //               ),
  1130.             //               SizedBox(width: ScreenUtil.getInstance().setSize(24),),
  1131.             //               ClipRRect(
  1132.             //                 borderRadius: BorderRadius.circular(ScreenUtil.getInstance().setSize(8)),
  1133.             //                 child: Image(
  1134.             //                   width: ScreenUtil.getInstance().setSize(48), 
  1135.             //                   height: ScreenUtil.getInstance().setSize(48),
  1136.             //                   image: getAssetImage('default.png'),
  1137.             //                   fit: BoxFit.cover,
  1138.             //                 ),
  1139.             //               ),
  1140.             //             ],
  1141.             //           ),
  1142.             //         ),
  1143.             //         nextPageArr()
  1144.             //       ],
  1145.             //     ),
  1146.             //   ),
  1147.             // )
  1148.           ],
  1149.         )
  1150.       )
  1151.     );
  1152.   }
  1153. }

封装空列表呈现组件

  1. import 'package:flutter/material.dart';
  2. import 'package:lingyi/config/color.dart';
  3. import 'package:lingyi/util/common.dart';
  5. class Nothing extends StatelessWidget {
  6.   final String title;
  7.   final double height;
  8.   final Color bgColor;
  9.   final bool isLoading;
  10.   Nothing(this.title, {this.height, this.bgColor, this.isLoading=false});
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Container(
  14.       padding: EdgeInsets.only(bottom: ScreenUtil.getInstance().setSize(100)),
  15.       width: MediaQuery.of(context).size.width,
  16.       height: height ?? MediaQuery.of(context).size.height,
  17.       decoration: BoxDecoration(
  18.         color: bgColor ?? kLingyiGray100
  19.       ),
  20.       alignment: Alignment.center,
  21.       child: Column(
  22.         mainAxisAlignment: MainAxisAlignment.center,
  23.         crossAxisAlignment: CrossAxisAlignment.center,
  24.         children: <Widget>[
  25.           isLoading ? Image(image: getAssetImage('1_circle/loading.png'), width: ScreenUtil.getInstance().setSize(380), fit: BoxFit.fitWidth,)
  26.           : Image(image: getAssetImage('5_public/default.png'), width: ScreenUtil.getInstance().setSize(420), fit: BoxFit.fitWidth,),
  27.           SizedBox(width: ScreenUtil.getInstance().setSize(30)),
  28.           Offstage(
  29.             offstage: isLoading,
  30.             child: Text(title, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText100),)
  31.           )
  32.         ],
  33.       ),
  34.     );
  35.   }
  36. }

安全区域的使用

  1. 1. 弹窗使用ScreenUtil.bottomBarHeight在底部增加高度
  2. 2. 使用SafeArea组件包括整个应用

根页面返回键退出App处理

  1. 使用 WillPopScope 组件包括入口组件
  2. Future<bool> _onWillPop() async {
  3.     ShowAlert.show(context, '确定退出应用吗?', onConfirm: () {
  4.     SystemNavigator.pop();
  5. });
  6. return false;
  7. }

webView 页面友好处理

  1. import 'package:flutter/material.dart';
  2. import 'package:webview_flutter/webview_flutter.dart';
  3. import 'package:annotation_route/route.dart';
  4. import 'package:lingyi/config/color.dart';
  5. @ARoute(url: 'page://webview')
  6. class Webview extends StatefulWidget {
  7.   final dynamic option;
  8.   Webview(this.option);
  9.   @override
  10.   WebviewState createState() => WebviewState();
  11. }
  13. class WebviewState extends State<Webview> {
  14.   bool isLoading = true;
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     String url = widget.option.query['url'];
  18.     String title = widget.option.query['title'];
  19.     return Scaffold(
  20.       appBar: AppBar(
  21.         title: Text(title),
  22.         leading: goBackArr(context),
  23.         bottom: PreferredSize(
  24.           preferredSize: Size.fromHeight(ScreenUtil.getInstance().setSize(4)),
  25.           child: Offstage(
  26.             offstage: !isLoading,
  27.             child: SizedBox(
  28.               height: ScreenUtil.getInstance().setSize(4),
  29.               width: MediaQuery.of(context).size.width,
  30.               child: LinearProgressIndicator(),
  31.             ),
  32.           ),
  33.         ),
  34.       ),
  36.       body: WebView(
  37.         onWebViewCreated: (WebViewController web) {
  38.           setState(() {
  39.             isLoading = true;
  40.           });
  41.         },
  42.         onPageFinished: (String value) {
  43.           setState(() {
  44.             isLoading = false;
  45.           });
  46.         },
  47.         initialUrl: url,
  48.         javascriptMode: JavascriptMode.unrestricted,
  49.       ),
  50.     );
  51.   }
  52. }

pdf 预览功能

  1. import 'dart:async';
  2. import 'dart:io';
  3. import 'package:flutter/foundation.dart';
  4. import 'package:flutter/material.dart';
  5. import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';
  6. import 'package:path_provider/path_provider.dart';
  7. import 'package:annotation_route/route.dart';
  8. import 'package:lingyi/config/color.dart';
  9. import 'package:lingyi/util/common.dart';
  11. // import 'package:flutter/services.dart' show rootBundle;
  12. // import 'dart:typed_data';
  14. @ARoute(url: 'page://pdfview')
  15. class Pdfview extends StatefulWidget {
  16.   final dynamic option;
  17.   Pdfview(this.option);
  18.   @override
  19.   PdfviewState createState() => new PdfviewState();
  20. }
  22. class PdfviewState extends State<Pdfview> {
  23.   String pathPDF = "";
  24.   @override
  25.   void initState() {
  26.     super.initState();
  27.     createFileOfPdfUrl().then((f) {
  28.       print(f.toString());
  29.       setState(() {
  30.         pathPDF = f.path;
  31.         print(pathPDF);
  32.       });
  33.     });
  34.   }
  36.   Future<File> createFileOfPdfUrl() async {
  37.     final url = "http://africau.edu/images/default/sample.pdf";
  38.     final filename = url.substring(url.lastIndexOf("/") + 1);
  39.     var request = await HttpClient().getUrl(Uri.parse(url));
  40.     var response = await request.close();
  41.     var bytes = await consolidateHttpClientResponseBytes(response);
  42.     String dir = (await getApplicationDocumentsDirectory()).path;
  43.     File file = new File('$dir/$filename');
  44.     await file.writeAsBytes(bytes);
  45.     return file;
  46.   }
  48.   // @override
  49.   // void initState() {
  50.   //   super.initState();
  51.   //   print('init');
  52.   //   printFile();
  53.   //   createFileOfPdfUrl().then((f) {
  54.   //     setState(() {
  55.   //       pathPDF = f.path;
  56.   //       print(pathPDF);
  57.   //     });
  58.   //   });
  59.   // }
  61.   // void printFile() async {
  62.   //   var filebd = await rootBundle.load("assets/data/cannon.pdf");
  63.   //   print(filebd.runtimeType);
  64.   // }
  66.   // Future<void> writeToFile(ByteData data, String path) {
  67.   //   final buffer = data.buffer;
  68.   //   return new File(path).writeAsBytes(
  69.   //       buffer.asUint8List(data.offsetInBytes, data.lengthInBytes));
  70.   // }
  72.   // Future<File> createFileOfPdfUrl() async {
  73.   //   final filename = 'test.pdf';
  74.   //   var bytes = await rootBundle.load("assets/data/cannon.pdf");
  75.   //   String dir = (await getApplicationDocumentsDirectory()).path;
  76.   //   writeToFile(bytes,'$dir/$filename');
  77.   //   File file = new File('$dir/$filename');
  78.   //   return file;
  79.   // }
  81.   @override
  82.   Widget build(BuildContext context) {
  83.     return pathPDF.isEmpty ? Scaffold(
  84.       appBar: AppBar(
  85.         title: Text("Document"),
  86.       ),
  87.       body: Container(
  88.         padding: EdgeInsets.only(bottom: ScreenUtil.getInstance().setSize(100)),
  89.         width: MediaQuery.of(context).size.width,
  90.         height: MediaQuery.of(context).size.height,
  91.         decoration: BoxDecoration(
  92.           color: kLingyiGray100
  93.         ),
  94.         alignment: Alignment.center,
  95.         child: Column(
  96.           mainAxisAlignment: MainAxisAlignment.center,
  97.           crossAxisAlignment: CrossAxisAlignment.center,
  98.           children: <Widget>[
  99.             Image(image: getAssetImage('5_public/default.png'), width: ScreenUtil.getInstance().setSize(420), fit: BoxFit.fitWidth,),
  100.             SizedBox(width: ScreenUtil.getInstance().setSize(30)),
  101.             Text('加载中...', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(28), color: kLingyiText100),)
  102.           ],
  103.         ),
  104.       )
  105.     ) : PDFViewerScaffold(
  106.       appBar: AppBar(
  107.         title: Text("Document"),
  108.       ),
  109.       path: pathPDF
  110.     );
  111.   }
  112. }