hottabych

cupertino_fullscreen_dialog_template

Nov 14th, 2020
1,105
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import 'package:flutter/material.dart';
  2.  
  3. import '../utils/colors.dart' as app_colors;
  4.  
  5. class CupertinoFullscreenDialogTemplate extends StatelessWidget {
  6.   /// Big white text
  7.   final String title;
  8.  
  9.   /// The width of title widget
  10.   final double titleWidth;
  11.  
  12.   /// The optional text above title
  13.   final String caption;
  14.  
  15.   /// Children of the inner Column
  16.   final List<Widget> content;
  17.  
  18.   const CupertinoFullscreenDialogTemplate({Key key, @required this.title, this.titleWidth, this.caption, @required this.content})
  19.       : super(key: key); // the optional text above title
  20.  
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     final titleText = Row(
  24.       children: [
  25.         ConstrainedBox(
  26.           constraints: BoxConstraints(maxWidth: titleWidth ?? 250),
  27.           child: Text(
  28.             title,
  29.             overflow: TextOverflow.visible,
  30.             style: Theme.of(context).textTheme.headline2.copyWith(color: app_colors.mainWhite),
  31.           ),
  32.         ),
  33.       ],
  34.     );
  35.     return Scaffold(
  36.       backgroundColor: Color(0xFF0F9DF1),
  37.       body: LayoutBuilder(
  38.         builder: (ctx, viewportConstraints) => Stack(
  39.           children: [
  40.             SingleChildScrollView(
  41.               physics: ClampingScrollPhysics(),
  42.               child: ConstrainedBox(
  43.                 constraints: BoxConstraints(
  44.                   minHeight: viewportConstraints.maxHeight,
  45.                 ),
  46.                 child: IntrinsicHeight(
  47.                   child: Column(
  48.                     children: [
  49.                       Container(
  50.                         width: double.infinity,
  51.                         decoration: BoxDecoration(
  52.                           gradient: LinearGradient(
  53.                             colors: [
  54.                               Color(0xFF0474B6),
  55.                               Color(0xFF0F9DF1),
  56.                             ],
  57.                             begin: Alignment.topCenter,
  58.                             end: Alignment.bottomCenter,
  59.                           ),
  60.                         ),
  61.                         // if no caption just show the title
  62.                         child: caption == null
  63.                             ? Padding(
  64.                                 padding: const EdgeInsets.only(top: 68, left: 20, bottom: 32),
  65.                                 child: titleText,
  66.                               )
  67.                             // otherwise the layout is a bit different
  68.                             : Padding(
  69.                                 padding: const EdgeInsets.only(top: 60, left: 24, bottom: 32),
  70.                                 child: Column(
  71.                                   crossAxisAlignment: CrossAxisAlignment.start,
  72.                                   children: [
  73.                                     Text(
  74.                                       caption,
  75.                                       style: TextStyle(
  76.                                         fontFamily: 'TTNormsPro',
  77.                                         fontWeight: FontWeight.w500,
  78.                                         fontSize: 14,
  79.                                         height: 22 / 14,
  80.                                         color: app_colors.mainWhite.withOpacity(0.67),
  81.                                       ),
  82.                                     ),
  83.                                     SizedBox(height: 5),
  84.                                     titleText,
  85.                                   ],
  86.                                 ),
  87.                               ),
  88.                       ),
  89.                       Expanded(
  90.                         child: Container(
  91.                           width: double.infinity,
  92.                           decoration: BoxDecoration(
  93.                             color: app_colors.mainWhite,
  94.                             borderRadius: BorderRadius.only(
  95.                               topLeft: Radius.circular(30),
  96.                               topRight: Radius.circular(30),
  97.                             ),
  98.                           ),
  99.                           child: Padding(
  100.                             padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 20),
  101.                             child: Column(
  102.                               crossAxisAlignment: CrossAxisAlignment.start,
  103.                               children: content,
  104.                             ),
  105.                           ),
  106.                         ),
  107.                       ),
  108.                     ],
  109.                   ),
  110.                 ),
  111.               ),
  112.             ),
  113.             Positioned(
  114.               right: 20,
  115.               top: 56,
  116.               child: RawMaterialButton(
  117.                 constraints: BoxConstraints.tight(Size(30, 30)),
  118.                 fillColor: Colors.white54,
  119.                 shape: CircleBorder(),
  120.                 child: Icon(
  121.                   Icons.close_outlined,
  122.                   color: app_colors.mainWhite,
  123.                 ),
  124.                 onPressed: () => Navigator.pop(context),
  125.               ),
  126.             )
  127.           ],
  128.         ),
  129.       ),
  130.     );
  131.   }
  132. }
  133.  
RAW Paste Data