From 178bb6f77214d5e1e888ea809aeb4af85cbec26d Mon Sep 17 00:00:00 2001 From: abdullah zakhoi Date: Wed, 5 Aug 2020 11:38:19 +0300 Subject: [PATCH] added bottom sheet dialog rather than SimpleDialog --- lib/country_code_picker.dart | 7 +- lib/selection_dialog.dart | 140 ++++++++++++++++++++--------------- pubspec.yaml | 1 + 3 files changed, 86 insertions(+), 62 deletions(-) diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index c4de323..1fa9672 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -4,6 +4,7 @@ import 'package:country_code_picker/country_code.dart'; import 'package:country_code_picker/country_codes.dart'; import 'package:country_code_picker/selection_dialog.dart'; import 'package:flutter/material.dart'; +import 'package:modal_bottom_sheet/modal_bottom_sheet.dart'; export 'country_code.dart'; @@ -226,9 +227,11 @@ class CountryCodePickerState extends State { } void showCountryCodePickerDialog() { - showDialog( + showMaterialModalBottomSheet( + barrierColor: Colors.grey.withOpacity(0.5), + backgroundColor: Colors.transparent, context: context, - builder: (_) => SelectionDialog( + builder: (context, scrollController) => SelectionDialog( elements, favoriteElements, showCountryOnly: widget.showCountryOnly, diff --git a/lib/selection_dialog.dart b/lib/selection_dialog.dart index 3c66f7d..8c36640 100644 --- a/lib/selection_dialog.dart +++ b/lib/selection_dialog.dart @@ -44,70 +44,90 @@ class _SelectionDialogState extends State { List filteredElements; @override - Widget build(BuildContext context) => SimpleDialog( - titlePadding: const EdgeInsets.all(0), - title: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - IconButton( - padding: const EdgeInsets.all(0), - iconSize: 20, - icon: Icon( - Icons.close, + Widget build(BuildContext context) => Padding( + padding: const EdgeInsets.all(16.0), + child: Container( + width: widget.size?.width ?? MediaQuery.of(context).size.width, + height: + widget.size?.height ?? MediaQuery.of(context).size.height * 0.85, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.all(Radius.circular(25.0)), + boxShadow: [ + BoxShadow( + color: Colors.grey.withOpacity(1), + spreadRadius: 5, + blurRadius: 7, + offset: Offset(0, 3), // changes position of shadow ), - onPressed: () => Navigator.pop(context), - ), - if (!widget.hideSearch) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 24), - child: TextField( - style: widget.searchStyle, - decoration: widget.searchDecoration, - onChanged: _filterElements, + ], + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + IconButton( + padding: const EdgeInsets.all(0), + iconSize: 20, + icon: Icon( + Icons.close, + ), + onPressed: () => Navigator.pop(context), + ), + if (!widget.hideSearch) + Padding( + padding: const EdgeInsets.symmetric(horizontal: 24), + child: TextField( + style: widget.searchStyle, + decoration: widget.searchDecoration, + onChanged: _filterElements, + ), + ), + ], + ), + Container( + width: widget.size?.width ?? MediaQuery.of(context).size.width, + height: widget.size?.height ?? + MediaQuery.of(context).size.height * 0.7, + child: ListView( + children: [ + widget.favoriteElements.isEmpty + ? const DecoratedBox(decoration: BoxDecoration()) + : Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ...widget.favoriteElements.map( + (f) => SimpleDialogOption( + child: _buildOption(f), + onPressed: () { + _selectItem(f); + }, + ), + ), + const Divider(), + ], + ), + if (filteredElements.isEmpty) + _buildEmptySearchWidget(context) + else + ...filteredElements.map( + (e) => SimpleDialogOption( + key: Key(e.toLongString()), + child: _buildOption(e), + onPressed: () { + _selectItem(e); + }, + ), + ), + ], ), ), - ], - ), - children: [ - Container( - width: widget.size?.width ?? MediaQuery.of(context).size.width, - height: - widget.size?.height ?? MediaQuery.of(context).size.height * 0.7, - child: ListView( - children: [ - widget.favoriteElements.isEmpty - ? const DecoratedBox(decoration: BoxDecoration()) - : Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ...widget.favoriteElements.map( - (f) => SimpleDialogOption( - child: _buildOption(f), - onPressed: () { - _selectItem(f); - }, - ), - ), - const Divider(), - ], - ), - if (filteredElements.isEmpty) - _buildEmptySearchWidget(context) - else - ...filteredElements.map( - (e) => SimpleDialogOption( - key: Key(e.toLongString()), - child: _buildOption(e), - onPressed: () { - _selectItem(e); - }, - ), - ), - ], - ), + ], ), - ], + ), ); Widget _buildOption(CountryCode e) { diff --git a/pubspec.yaml b/pubspec.yaml index 38d7211..e967ba7 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -7,6 +7,7 @@ environment: sdk: ">=2.2.2 <3.0.0" dependencies: + modal_bottom_sheet: ^0.2.0+1 flutter: sdk: flutter