How to add Hero animations to my ListView in Flutter? - flutter

I have a ListView that has cards as shown below. I am trying to animate the card to open in a bigger size upon being pressed.
I have already achieved this for a single card however I can not understand how to do this for a ListView. Upon adding the Hero tag on the ListView elements, I get the following error:
There are multiple heroes that share the same tag within a subtree.
This is the animation.
This is the code for the animation:
The first Page:
Widget build(BuildContext context) {
return new Scaffold(
body: Hero(
tag: 'flutterLogo',
child: GestureDetector(
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => AnimatedPage())),
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
height: 180,
width: 300,
color: Colors.blue,
),
),
)),
);
}
The Second Page:
Widget build(BuildContext context) {
return new Scaffold(
body: Stack(
children: <Widget>[
Hero(
tag: 'flutterLogo',
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Card(
elevation: 4.0,
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
height: 200,
width: 300,
child: Center(child: Text('Hello')),
),
),
),
),
],
),
);
}
And this is the code for my ListView:
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Hero(
tag: 'flutterLogo',
child: Padding(
padding: const EdgeInsets.only(top: 10.0, bottom: 10),
child: GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => PaymentPage()));
},
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
height: 180,
width: 150,
),
),
),
),
);
},
childCount: 4,
),
),
And this is what the list looks like:
I am trying to open the same
second page as shown in the Animation, after clicking on the card in the List.

Hero Tags should be different, so in your SliverList change your tag to this:
tag: 'flutterLogo${index}',
and pass the tag to your second page, like this(in case its a StatefulWidget):
class SecondPage extends StatefulWidget {
final String heroTag;
SecondPage({Key key, this.heroTag}) : super(key: key);
#override
_SecondPageState createState() => _SecondPageState();
}
and then instead of using a simple tag in your second page use something like this:
tag: widget.heroTag,

Related

How to make reusable modal bottom sheet

usually I use showModalBottomSheet for each view to call a ModalBottomSheet with the same content on it. I just want to make it simple as I can call the class of reusable modal bottomsheet.
_moreModalBottomSheet(context) {
Size size = MediaQuery.of(context).size;
showModalBottomSheet(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
),
context: context,
builder: (BuildContext bc) {
return Container(
height: size.height * 0.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: ListView(
physics: ClampingScrollPhysics(),
children: [
//content of modal bottomsheet
],
),
),
);
});
}
for example, I use button to show modal bottom sheet
ElevatedButton(onPressed: _moreModalBottomSheet(context), child: Text('show modal bottom sheet'))
I want to make _moreModalBottomSheet() as a class so it reusable.
on this answer its only a reusable a layout. But, what I trying to achieve is make a custom class ModalBottomSheet. So I can call ModalBottomSheet in other class only like ModalBottomSheet() not showModalBottomSheet that return ModalBottomSheet . It's that possible?
You just need to extract it to a new class like:
class ModalBottomSheet {
static void _moreModalBottomSheet(context) {
Size size = MediaQuery.of(context).size;
showModalBottomSheet(
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0),
),
context: context,
builder: (BuildContext bc) {
return Container(
height: size.height * 0.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: ListView(
physics: ClampingScrollPhysics(),
children: [
//content of modal bottomsheet
],
),
),
);
});
}
}
Now you can call it everywhere like:
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: ElevatedButton(
onPressed: () =>
ModalBottomSheet._moreModalBottomSheet(context),
child: Text('open modal'),
),
),
),
);
}
}
Open bottom sheet like this
InkWell(
onTap: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return ModalBottomSheet(
);
});
})
Stateful bottom sheet
class ModalBottomSheet extends StatefulWidget {
#override
_ModalBottomSheetState createState() => _ModalBottomSheetState();
}
class _ModalBottomSheetState extends State<ModalBottomSheet>
with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
// TODO: implement build
return Wrap(
children: <Widget>[
Container(
margin:
EdgeInsets.only(left: 10.0, right: 10.0, top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
Widgets(),
]
)
)
],
);
}
}

Flutter State won't update

I'm trying to create a listview of cards whose images get displayed in the listview only if the card is selected. The selection widget is the PopupSubscription() where I'm choosing which cards (SubscriptionCard) to display by setting the bool of that particular image to be true. But when the selections are applied, the selected images don't appear immediately even after doing setState().
However, they do appear when I switch tabs and return the screen again. What should I do in order to change the state of an object that's not in my current state class? I tried using Provider but it left me confused as to what I'm supposed to do.
This is the SubscriptionCard where the bool is set on tapping it:
return InkWell(
radius: 1.0,
borderRadius: BorderRadius.circular(8.0),
highlightColor: buttonBackground,
onTap: () {
setState(() {
widget.currentSubscription.selected = !widget.currentSubscription.selected;
});
},
child: Card(
elevation: 1.0,
borderOnForeground: true,
shape: widget.currentSubscription.selected ? RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3.0),
side: BorderSide(color: buttonBackground, width: 2.0),
) : ContinuousRectangleBorder(),
color: bgDarkColor,
child: SizedBox(
width: SizeConfig.blockSizeHorizontal * 30,
child: Stack(
alignment: Alignment.topRight,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Image.asset(this.widget.currentSubscription.logo, height: 35.0,),
Text(
' ${this.widget.currentSubscription.name}',
style: TextStyle(fontFamily: 'Muli', fontSize: 16.0)
),
],
),
widget.currentSubscription.selected ? Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: buttonBackground,
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(
Icons.check,
size: 10.0,
color: Colors.white,
),
),
) : Container()
],
),
),
),
);
This is the ListView where the selected cards' images are rendered:
Container(
height: 50,
width: 350,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
IconButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return PopupSubscription();
}
);
},
icon: Icon(Icons.add_box_rounded, size: 30.0,),
),
StatefulBuilder(
builder: (context, setState) {
return ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: subscriptionsList.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.asset(
subscriptionsList[index].selected ? subscriptionsList[index].logo
: "assets/elements/streaming-services/netflix.jpeg",
),
),
);
},
);
}
),
],
)
),
Based on your current code, I'm guessing you've added the currentSubscription variable as final in the StatefulWidget above the actual State, like:
class MyClass extends StatefulWidget{
final currentSubscription;
// Rest of the code
}
class _MyClassState extends State<MyClass> {
// Your ListView Code and other stuff.
}
This wont work when you want to change the state onTap, I recommend making the variable you use in setState within the _MyClassState class and use setState in that. Something like:
class _MyClassState extends State<MyClass> {
bool _isSelected = false;
// And in your onTap method, something like:
setState(() {
_isSelected = !_isSelected;
});
}

How to put an iOS style dismissible bar on flutter modal sheet

I am pretty new to flutter and trying to achieve a dismissible bar for my modalSheet. Something like this image:
I can only think of a stack. But that would make the code complex. Please let me know if there is a better way.
Is this what you are looking for modal_bottom_sheet:
showBarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context, scrollController) =>
ModalInsideModal(
scrollController: scrollController),
)),
To display showModalBottomSheet as IOS modal style:
1- Create new Dart Class IOSModalStyle with this full code:
import 'package:flutter/material.dart';
class IOSModalStyle extends StatelessWidget {
final Widget childBody;
const IOSModalStyle({
Key? key,
required this.childBody,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(16.0),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_dividerWidget(),
Container(
decoration: BoxDecoration(
color: Colors.white, // color of card
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
),
height: 200, // body container height
width: double.infinity,
child: childBody,
)
],
),
);
}
Widget _dividerWidget() {
return FractionallySizedBox(
widthFactor: 0.2, // width of top divider bar
child: Container(
margin: const EdgeInsets.symmetric( // margin of top divider bar
vertical: 12.0,
),
child: Container(
height: 5.0,
decoration: BoxDecoration(
color: Colors.white, // color of top divider bar
borderRadius: const BorderRadius.all(Radius.circular(2.5)),
),
),
),
);
}
}
2- You can call above class from anywhere like this:
showModalBottomSheet<void>(
isScrollControlled: true, // to full height
useSafeArea: true, // to show under status bar
backgroundColor: Colors.transparent, // to show BorderRadius of Container
context: context,
builder: (BuildContext context) {
return IOSModalStyle(
childBody: Center(
child: Text('Hello, Im Anas...'),
),
);
},
);
Result:

Flutter custom bottom sheet

I have a ListView where I want to implement a nice way to delete list items using a bottom sheet with actions on. Initially I went down the path of simply calling showBottomSheet() in the onLongPress event handler for my list items, which would successfully open a bottom sheet with my action buttons on. However, this would automatically add a back button to the AppBar which is not what I want.
I then went down the route of trying out animations, such as SlideTransition and AnimatedPositioned:
class FoldersListWidget extends StatefulWidget {
#override
_FoldersListWidgetState createState() => _FoldersListWidgetState();
}
class _FoldersListWidgetState extends State<FoldersListWidget>
with SingleTickerProviderStateMixin {
double _bottomPosition = -70;
#override
Widget build(BuildContext context) {
return Stack(
children: [
FutureBuilder<List<FolderModel>>(
future: Provider.of<FoldersProvider>(context).getFolders(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, i) {
final folder = snapshot.data[i];
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
elevation: 1,
child: ListTile(
title: Text(folder.folderName),
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 50,
child: Consumer<FoldersProvider>(
builder:
(BuildContext context, value, Widget child) {
return value.deleteFolderMode
? CircularCheckBox(
value: false,
onChanged: (value) {},
)
: Icon(
Icons.folder,
color: Theme.of(context).accentColor,
);
},
),
),
],
),
subtitle: folder.numberOfLists != 1
? Text('${folder.numberOfLists} items')
: Text('${folder.numberOfLists} item'),
onTap: () {},
onLongPress: () {
Provider.of<FoldersProvider>(context, listen: false)
.toggleDeleteFolderMode(true); // removes fab from screen
setState(() {
_bottomPosition = 0;
});
},
),
);
},
);
},
),
AnimatedPositioned(
bottom: _bottomPosition,
duration: Duration(milliseconds: 100),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
child: Container(
height: 70,
width: MediaQuery.of(context).size.width,
color: Theme.of(context).colorScheme.surface,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
child: IconAboveTextButton(
icon: Icon(Icons.cancel),
text: 'Cancel',
textColour: Colors.black,
opacity: 0.65,
onTap: () => setState(() {
_bottomPosition = -70;
}),
),
),
VerticalDivider(
color: Colors.black26,
),
Expanded(
child: IconAboveTextButton(
icon: Icon(Icons.delete),
text: 'Delete',
textColour: Colors.black,
opacity: 0.65,
),
),
],
),
),
),
),
],
);
}
}
This slides the bottom Container on and off the screen but my issue is that it covers the last list item:
Could anyone suggest a better way of doing this or simply a way to adjust the height of the ListView so that when the Container slides up, the ListView also slides up.
Wrap ListView.builder inside a container and set its bottom padding as (70+16)
70 (height of bottom sheet), 16 (some default padding to make it look better if you like).
return Container(
padding: EdgetInset.ony(bottom: (70+16)),
child:ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, i) {
.....
.....

Flutter: How to change the width of an AlertDialog?

I wonder how to change the default width of an AlertDialog, I only succeeded to change the border radius :
Here is my code :
showDialog(
context: context,
builder: (_) =>
new AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))
),
content: ProductPreviewScreen(),
)
);
Result expected :
Any idea?
As of May 2020, if you want to change the inset padding of a dialog, all you have to do is use the Dialog class and override the 'insetPadding' property. You can make a dialog extend all the way to the screen edges if you want to.
You can also make some cool custom dialogs by making the dialog surface itself transparent and then add whatever widgets you want. For example:
showDialog(Dialog(
backgroundColor: Colors.transparent,
insetPadding: EdgeInsets.all(10),
child: Stack(
overflow: Overflow.visible,
alignment: Alignment.center,
children: <Widget>[
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.lightBlue
),
padding: EdgeInsets.fromLTRB(20, 50, 20, 20),
child: Text("You can make cool stuff!",
style: TextStyle(fontSize: 24),
textAlign: TextAlign.center
),
),
Positioned(
top: -100,
child: Image.network("https://i.imgur.com/2yaf2wb.png", width: 150, height: 150)
)
],
)
));
Results in:
This is much more simple then the other answers make it out to be. Just use a builder to change the size of the dialog as it is being built(constructed, instantiated in other languages). This means you can also query the screen size and make a decision on how much space you want depending on said screen size. For example more space on a tablet then on a phone. You can make Scaffold a child of the Container if you need the App bar and other functions.
showDialog(
context: context,
builder: (_) => new AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(
Radius.circular(10.0))),
content: Builder(
builder: (context) {
// Get available height and width of the build area of this widget. Make a choice depending on the size.
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return Container(
height: height - 400,
width: width - 400,
);
},
),
)
);
Examples of different sizes:
Optionally add these to remove unneeded inner/outer border space.
insetPadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero,
clipBehavior: Clip.antiAliasWithSaveLayer,
Using built-in dialog:
To increase the width:
AlertDialog(
title: Text("AlertDialog"),
insetPadding: EdgeInsets.zero,
)
To decrease the width:
AlertDialog(
title: Text("AlertDialog"),
insetPadding: EdgeInsets.symmetric(horizontal: 100),
)
Using custom dialog:
Call this method:
showGeneralDialog(
context: context,
barrierColor: Colors.black.withOpacity(0.5),
pageBuilder: (_, __, ___) {
return Material(
color: Colors.transparent,
child: Center(
child: Container(
color: Colors.white, // Dialog background
width: 120, // Dialog width
height: 50, // Dialog height
child: SingleChildScrollView(
child: Column(
children: [
Text('I am a small Dialog'),
],
),
),
),
),
);
},
);
You could try to wrap your AlertDialog widget with ConstrainedBox widget as suggested in here and set your desired value for maxWidth parameter.
UPDATED
I just looked at the code of the parent of the AlertDialog widget which is the Dialog widget and found out that it wrapped its child with a ConstrainedBox widget with a minWidth of 280 pixels. This is the reason why we can't change the width of the AlertDialog widget.
Fortunately, there are two things that we can do. First option would be to alter the default minWidth of the Dialog Widget inside the dialog.dart file. Note that changing this would affect all of your flutter projects that uses the Dialog widget.
//inside dialog.dart
class Dialog extends StatelessWidget {
...
#override
Widget build(BuildContext context) {
final DialogTheme dialogTheme = DialogTheme.of(context);
return AnimatedPadding(
padding: MediaQuery.of(context).viewInsets + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
duration: insetAnimationDuration,
curve: insetAnimationCurve,
child: MediaQuery.removeViewInsets(
removeLeft: true,
removeTop: true,
removeRight: true,
removeBottom: true,
context: context,
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 280.0), // You can set your desired value for minWidth here
child: Material(
elevation: 24.0,
...
You can then use the AlertDialog like this:
showDialog(
context: context,
builder: (_) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))
),
contentPadding: EdgeInsets.all(0.0),
content: ProductPreviewScreen(),
)
)
);
The other way would be to create our own customize dialog.
showDialog(
context: context,
builder: (_) => Center( // Aligns the container to center
child: Container( // A simplified version of dialog.
width: 100.0,
height: 56.0,
color: Colors.pink,
)
)
);
Use Padding widget
Padding(
padding: EdgeInsets.only(left: 50.0, right: 50.0),
child://AlertDialog or any other Dialog you can use
Dialog(
elevation: 0.0,
backgroundColor: Colors.transparent,
child: Container(
width: 10.0,
height: 50.0,
color: Colors.red,
)
))
My solution is to enclose the Dialog in a widget that defeats the extra padding added by the Dialog class by modifying the MediaQueryData.
import 'package:myapp/widgets/dialog_inset_defeat.dart';
...
showDialog(
context: context,
builder: (_) => DialogInsetDefeat(
context: context,
child: SimpleDialog(...),
)
);
... or use showDialogWithInsets() for custom values:
showDialogWithInsets(
context: context,
edgeInsets: EdgeInsets.symmetric(horizontal: 8),
builder: (_) => SimpleDialog(...),
)
);
File dialog_inset_defeat.dart
import 'package:flutter/material.dart';
/// A widget to defeat the hard coded insets of the [Dialog] class which
/// are [EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)].
///
/// See also:
///
/// * [Dialog], for dialogs that have a message and some buttons.
/// * [showDialog], which actually displays the dialog and returns its result.
/// * <https://material.io/design/components/dialogs.html>
/// * <https://stackoverflow.com/questions/53913192/flutter-change-the-width-of-an-alertdialog>
class DialogInsetDefeat extends StatelessWidget {
final BuildContext context;
final Widget child;
final deInset = EdgeInsets.symmetric(horizontal: -40, vertical: -24);
final EdgeInsets edgeInsets;
DialogInsetDefeat({#required this.context, #required this.child, this.edgeInsets});
#override
Widget build(BuildContext context) {
var netEdgeInsets = deInset + (edgeInsets ?? EdgeInsets.zero);
return MediaQuery(
data: MediaQuery.of(context).copyWith(viewInsets: netEdgeInsets),
child: child,
);
}
}
/// Displays a Material dialog using the above DialogInsetDefeat class.
/// Meant to be a drop-in replacement for showDialog().
///
/// See also:
///
/// * [Dialog], on which [SimpleDialog] and [AlertDialog] are based.
/// * [showDialog], which allows for customization of the dialog popup.
/// * <https://material.io/design/components/dialogs.html>
Future<T> showDialogWithInsets<T>({
#required BuildContext context,
bool barrierDismissible = true,
#required WidgetBuilder builder,
EdgeInsets edgeInsets,
}) {
return showDialog(
context: context,
builder: (_) => DialogInsetDefeat(
context: context,
edgeInsets: edgeInsets,
child: Builder(builder: builder),
),
// Edited! barrierDismissible: barrierDismissible = true,
barrierDismissible: barrierDismissible,
);
}
Works for me as of Flutter 1.8.3. YMMV
use Dialog()
Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
insetPadding: EdgeInsets.all(15),
child: SingleChildScrollView(
child: Container(),
),
),
);
Medling with insetWidth and future builder etc. didn't work for me - just editing the content prop's width worked perfectly.
showDialog(
context: context,
builder: (context) {
Future.delayed(Duration(seconds: 1000), () {
Navigator.of(context).pop(true);
});
return AlertDialog(
insetPadding: EdgeInsets.all(8.0),
title: Text(
"Time to go pro!",
textAlign: TextAlign.center,
),
content: Container(
width: MediaQuery.of(context).size.width,
child: BuySheet(
applePayEnabled: applePayEnabled,
googlePayEnabled: googlePayEnabled,
applePayMerchantId: applePayMerchantId,
squareLocationId: squareLocationId),
),
);
});
I finally found a way to change the width of an AlertDialog.
Just wrap the "content" with a Container, and set the width to it.
return AlertDialog(
...
content: Container(
width: MediaQuery.of(context).size.width*0.45,
child: ...
AlertDialog with width modified
You can change the AlertDialog property insetPadding it will be a simple way for you.
void alertBox() {
showDialog(
context: context,
builder: (context) => AlertDialog(
insetPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
// (horizontal:10 = left:10, right:10)(vertical:10 = top:10, bottom:10)
contentPadding: EdgeInsets.zero,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
content: Container(
width: MediaQuery.of(context).size.width - 20,
// width = device width minus insetPadding = deviceWidth - 20 (left:10, right:10 = 20)
height: MediaQuery.of(context).size.height - 20,
// height = device height minus insetPadding = deviceHeight - 20 (top:10, bottom:10 = 20)
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Card(
margin: EdgeInsets.zero,
color: Colors.amber,
),
),
),
),
);
}
Refer this code. you can change width and height of dialogue box by setting insetPadding, because it taking default padding so we need to change like this.
showDialog(
context: context,
builder: (_) =>
Dialog(
insetPadding: EdgeInsets.symmetric(horizontal: 2.0, vertical: 2.0),
backgroundColor: Colors.transparent,
child: Container(
width: double.infinity,
height: MediaQuery.of(context).size.height*0.7 ,
decoration: BoxDecoration(
color: Colors.grey[900],
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: (){
Navigator.pop(context);
},
child: Icon(Icons.close,color: Colors.grey,)),
],
),
),
Text("select your avatar",style: TextStyle(color: white,fontWeight: FontWeight.bold),),
],
),
),
),
);
:
return Dialog(
backgroundColor: Colors.white,
insetPadding: EdgeInsets.all(10.0),
child: Container(
width: double.infinity,
use insetpadding where you are returning Dialog and give it a double value, For my case, i gave it a 10.0
insetPadding: EdgeInsets.all(10.0), you can give it a custom height
Hello you can actually use insetPadding and use a column inside content that will contain a SizedBox(width:MediaQuery.of(context).size.width).The only difference is that I used AlertDialog. Bellow is the way it worked for me. You can set dialog width by changing padding inside insetPadding. Hope i helped :).
dialog(){
TextEditingController controller = TextEditingController();
return showDialog(
context: context,
barrierDismissible: true,
builder: (_) => AlertDialog(
insetPadding: EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.08),
content: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 16,
width: MediaQuery.of(context).size.width,
),
Text(
'Hello',
),
SizedBox(
height: 15,
),
Text(
'Description',
),
TextField(
controller: controller,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
actions: [
FlatButton(
child: Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
);
}
This is how it looks like
https://i.stack.imgur.com/bvKpP.png
Add InsetPadding property like this
insetPadding: EdgeInsets.zero
AlertDialog(
title: Center(child: Text("$title")),
------------------------->Here we added the property
insetPadding: EdgeInsets.zero,
titlePadding: EdgeInsets.only(top: 14.0, bottom: 4),
content: Container(
height: 50,
child: TextFormField(
controller: find_controller,
decoration: InputDecoration(
suffixIcon: context.watch<MediaProvider>().isChangeDialog
? IconButton(
onPressed: () {
clearController(find_controller);
},
icon: Icon(Icons.clear))
: null,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurpleAccent)),
hintText: 'Id',
),
onChanged: (val) {
if (val.isNotEmpty)
context.read<MediaProvider>().isChangeDialog = true;
else
context.read<MediaProvider>().isChangeDialog = false;
},
),
),
actions: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(4.0),
child: OutlinedButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Icon(Icons.clear),
),
),
Text("Cancel")
],
),
onPressed: () {
context.read<MediaProvider>().isChangeDialog = false;
Navigator.of(context).pop();
}),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: ElevatedButton(
onPressed: context.watch<MediaProvider>().isChangeDialog
? () {
context.read<MediaProvider>().isChangeDialog = false;
okCallback;
}
: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Icon(Icons.check),
),
),
Text("OK")
],
)),
)
],
),
],
);
Before
After
The solution that worked for me.
Set the insetPadding of the AlertDialog.
Plus, wrap the content in a SizedBox and set the width to MediaQuery.of(context).size.width.
return AlertDialog(
content: SizedBox(
width: MediaQuery.of(context).size.width,
child: const Text("Content"),
),
insetPadding: const EdgeInsets.all(10),
);
Setting just the insetPadding alone does not work.
return Dialog(
insetPadding: EdgeInsets.symmetric(
horizontal: X,
),
);
I found the simplest way... just add insetPadding: EdgeInsets.zero, and it will expand to max size width:
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text("Send Message", style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),)),
backgroundColor: Colors.indigo[700],
insetPadding: EdgeInsets.zero,
content:
As a workaround, you can play with the dialog title, in most cases the dialog will expand horizontally to accommodate the title. So you can create big title to make sure the dialog will take max width. Obviously you can't just put long title, but you can build your title of two text widgets, where one of them has text color matching background. For the case where no title should be shown:
showDialog(
context: context,
builder: (_) =>
new AlertDialog(
title: Text('hidden title, just set font text to the same as background.',
style: TextStyle(color: Colors.white)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))
),
content: ProductPreviewScreen(),
)
);
I am using get package and it is wonderful. use its dialog, easily sizable
Get.generalDialog(pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation,) {
return SimpleDialog(
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(Constants.padding), ),
elevation: 0, backgroundColor: Colors.transparent,
children: [Center(child: Stack(
children: <Widget>[
Container(width: Get.width * 0.95,
padding: const EdgeInsets.only(left: Constants.padding,top: Constants.avatarRadius
+ Constants.padding, right: Constants.padding,bottom: Constants.padding
),
margin: const EdgeInsets.only(top: Constants.avatarRadius),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Get.theme.scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(Constants.padding),
boxShadow: const [
BoxShadow(color: Colors.black,offset: Offset(0,10), blurRadius: 10 ),
]
),
child: Text('body'),
),
Positioned(
left: Constants.padding, right: Constants.padding,
child: CircleAvatar(
backgroundColor: Colors.blueAccent, radius: Constants.avatarRadius,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(Constants.avatarRadius)),
child: Icon(Icons.done, size: 24, color: Colors.white,)
),
),
),
Positioned(
left: 0,
//right: Constants.padding,
child: CircleAvatar(
backgroundColor: Colors.blueAccent, radius: Constants.avatarRadius,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(Constants.avatarRadius)),
child: InkWell(child: const Icon(Icons.close, size: 24, color: Colors.white,), onTap: (){Get.back();},)
),
),
),
],
))],
);
}, barrierDismissible: true, barrierLabel: '');
Use width: MediaQuery.of(context).size.width to increase width of the alert
Example:
return AlertDialog(
title: Text("Select Birth Date"),
content: Container(
width: MediaQuery.of(context).size.width,
height: 300,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
initialDateTime: DateTime(1969, 1, 1),
onDateTimeChanged: (DateTime newDateTime) {
// Do something
},
),
),
actions: <Widget>[
FlatButton(
child: Text("Select"),
onPressed: () {
widget.onSelected(selectedDate);
Navigator.pop(context);
//.....
},
),
],
);
/// this works for me paste your body and see result
Future _showDialog() async {
return showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Material(
color: Colors.transparent,
child: Container(
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(10),
/// paste your item body
child:body,
),
),
],
),
);
},
);
}
In my case, I was using listview inside the dialog box so I was not using
shrink wrap inside ListView hopes this will help someone.
ListView.builder(
shrinkWrap : true...
...
};