cupertino_fullscreen_dialog_template

import 'package:flutter/material.dart';

import '../utils/colors.dart' as app_colors;

class CupertinoFullscreenDialogTemplate extends StatelessWidget {
  /// Big white text
  final String title;

  /// The width of title widget
  final double titleWidth;

  /// The optional text above title
  final String caption;

  /// Children of the inner Column
  final List<Widget> content;

  const CupertinoFullscreenDialogTemplate({Key key, @required this.title, this.titleWidth, this.caption, @required this.content})
      : super(key: key); // the optional text above title

  @override
  Widget build(BuildContext context) {
    final titleText = Row(
      children: [
        ConstrainedBox(
          constraints: BoxConstraints(maxWidth: titleWidth ?? 250),
          child: Text(
            title,
            overflow: TextOverflow.visible,
            style: Theme.of(context).textTheme.headline2.copyWith(color: app_colors.mainWhite),
          ),
        ),
      ],
    );
    return Scaffold(
      backgroundColor: Color(0xFF0F9DF1),
      body: LayoutBuilder(
        builder: (ctx, viewportConstraints) => Stack(
          children: [
            SingleChildScrollView(
              physics: ClampingScrollPhysics(),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: viewportConstraints.maxHeight,
                ),
                child: IntrinsicHeight(
                  child: Column(
                    children: [
                      Container(
                        width: double.infinity,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              Color(0xFF0474B6),
                              Color(0xFF0F9DF1),
                            ],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                        ),
                        // if no caption just show the title
                        child: caption == null
                            ? Padding(
                                padding: const EdgeInsets.only(top: 68, left: 20, bottom: 32),
                                child: titleText,
                              )
                            // otherwise the layout is a bit different
                            : Padding(
                                padding: const EdgeInsets.only(top: 60, left: 24, bottom: 32),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      caption,
                                      style: TextStyle(
                                        fontFamily: 'TTNormsPro',
                                        fontWeight: FontWeight.w500,
                                        fontSize: 14,
                                        height: 22 / 14,
                                        color: app_colors.mainWhite.withOpacity(0.67),
                                      ),
                                    ),
                                    SizedBox(height: 5),
                                    titleText,
                                  ],
                                ),
                              ),
                      ),
                      Expanded(
                        child: Container(
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: app_colors.mainWhite,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(30),
                              topRight: Radius.circular(30),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 20),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: content,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              right: 20,
              top: 56,
              child: RawMaterialButton(
                constraints: BoxConstraints.tight(Size(30, 30)),
                fillColor: Colors.white54,
                shape: CircleBorder(),
                child: Icon(
                  Icons.close_outlined,
                  color: app_colors.mainWhite,
                ),
                onPressed: () => Navigator.pop(context),
              ),
            )
          ],
        ),
      ),
    );
  }
}