To implement flutter bottomSheetDialog with dynamic height, I wrote a code like this.
void showCustomBottomSheetDialog(Widget body, BuildContext context) {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext ctx) {
return Wrap(
children: [
Column(
children: [
Container(
height: 24.sp,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
),
),
body,
],
),
],
);
},
);
}
showCustomBottomSheetDialog(
Container(
child: Column(
children: [
TextFormField(),
Text('asdfasdfds'),
Text('asdfasdfds'),
Text('asdfasdfds'),
],
),
),
context,
);
But with this code, the displayed bottomSheet did not have a rounded corner...
Could you tell me what is a problem of my code...?
create rounded corner manually
eg:
showModalBottomSheet(
isScrollControlled: true,
context: context,
backgroundColor: Colors.transparent,
builder: (contex) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.vertical(top: Radius.circular(18))),
child: Column(
children: []
....
also you can wrap it with DraggableScrollableSheet to make it scrollable widget
This is because the Container with rounded corner is inside the Column widget.
For this to work ,lift up the Container.
Code now:
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext ctx) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
),
child: Column(...)
),
},
);
Actually, we have shape property on showModalBottomSheet and can be used to make rounded corner, like
showModalBottomSheet(
isScrollControlled: true,
context: context,
shape: const RoundedRectangleBorder( //this
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24),
),
),
More about showModalBottomSheet
Related
showModalBottomsheet adds listview as a child Widget. When listview slides to the top, how to respond to the bottom sheet drop-down gesture by continuing to pull down
showModalBottomSheet(
context: context,
isScrollControlled: true,
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.85),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20)),
),
builder: (context) {
return ListView.builder(
controller: scrollController,
itemBuilder: (context, index) => ListTile(
title: Text(index.toString()),
onTap: () => Navigator.pop(context),
));
});
You can use DraggableScrollableSheet
showModalBottomSheet(
context: context,
isScrollControlled: true,
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.85),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20)),
),
builder: (context) {
return DraggableScrollableSheet(
builder: (context, scrollController) {
return ListView.builder(
itemCount: 32,
controller: scrollController,
itemBuilder: (context, index) => ListTile(
title: Text(index.toString()),
onTap: () => Navigator.pop(context),
),
);
},
);
},
);
Find more about DraggableScrollableSheet decoration
I can't seem to find a good way to remove these small white lines, changed the container color to fit with the ModalBottomSheet default background color.
Here is a part of code:
void mountainModalBottomSheet(context){
showModalBottomSheet(context: context, builder: (BuildContext bc){
return Container(
color: Color(0xff757575),
height: MediaQuery.of(context).size.height*.60,
child:Column(
children: [
Container(
width: double.infinity,
height: 225,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(38),
topRight: Radius.circular(38),
),
image:DecorationImage(image: NetworkImage('https://hotelvilatina.hr/wp-content/uploads/2017/11/sljeme.jpg'),
fit: BoxFit.fill),
),
Update
You can use shape property but you need to make sure of providing clipBehavior:hardEdge
showModalBottomSheet(
clipBehavior: Clip.antiAlias, // or hardEdge must
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(38),
topRight: Radius.circular(38),
),
),
context: context,
backgroundColor: Colors.white,
builder: (c) {
return Container();
});
Wrap your Container with ClipRRect widget
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent, // make sure of it
builder: (c) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(38),
topRight: Radius.circular(38),
),
child: Container(
color: Colors.white,
));
});
You can use the "shape" property of showModalBottomSheet to give a radius to your bottom sheet. In this way, your bottom sheet has its own radiuses and you will no longer see your white lines.
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
backgroundColor: Colors.white,
...
);
I am using the staggered grid view package. How do I make the images within my staggered grid view clickable? I have tried adding in the GestureDetector function but I do not know where exactly I should input it into the code.
here is my code
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class ExploreGridView extends StatelessWidget {
const ExploreGridView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => StaggeredGridView.countBuilder(
staggeredTileBuilder: (index) => StaggeredTile.fit(2),
crossAxisCount: 4,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
itemCount: 12,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => buildImageCard(index),
);
Widget buildImageCard(int index) => Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[850],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12)),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(5.0, 5.0),
blurRadius: 15.0,
spreadRadius: 1.0),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(_NFTImgurls[index]),
),
),
);
}
List<String> _NFTImgurls = [
'https://res.cloudinary.com/nifty-gateway/video/upload/v1607376477/beepleopenedition/BEEPLE_2020COLLECTION_INTO-THE-ETHER_wv3eyt.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1613576449/A/MadDogJones/MDJ_-_Escalation_C2_iskzf4.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1610827318/A/Billelis/%CE%9A%CE%91%CE%98%CE%91%CE%A1%CE%A3%CE%99%CE%A3_udzhmj.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1610463118/A/DeadmauMadDog/MDJxDeadmau5_Dead_ramen_md6abq.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1614741616/Ashley/AndreasWannerstedt3/the_smooth_saint_-_Andreas_Wannerstedt_jetmhb.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1614650252/A/SteveAoki/character_X_-_Carly_Bernstein_rgtnih.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1605799567/MadDogJones/MDJ_-_Ideas_r_the_currency_e1o1r2.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1629082199/Andrea/NessGraphics/NessGraphics_L0G1ST1CS_Final_cg81g5.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1607532674/beepleopenedition/BEEPLE_2020COLLECTION_BULL-RUN_bqjzfj.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1614741607/Ashley/AndreasWannerstedt3/the_open_hand_-_Andreas_Wannerstedt_au1bjs.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1613507277/A/MadDogJones/Why_would_I_care__I_m_just_a_cat_1_tvtdr3.png',
'https://res.cloudinary.com/nifty-gateway/video/upload/v1618196543/Pak/ACube.png',
];
You can wrapper your Card with a GestureDetector and set onTap callback propety to do what you want.
See: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html?msclkid=35f66352a95311eca644621b0a8beb24
you have to use GestureDetector
look at this example
=> GestureDetector( onTap: () => Navigator.of(context) .push(MaterialPageRoute(builder: (context) => DetailPage()) ),
I am wondering why a wrapped Inkwell widget is not working on a simple flutter screen. The code is the following:
class SearchButtonState extends State<SearchButton> {
bool folded = true;
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 400),
width: folded ? 56 : 200,
height: 56,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Color(0xFF88B4E0),
boxShadow: kElevationToShadow[6],
),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !folded
? TextField(
decoration: InputDecoration(
hintText: 'Search',
hintStyle: TextStyle(color: Colors.blue),
border: InputBorder.none),
)
: null,
),
),
Container(
//fixing splash
child: Material(
type: MaterialType.transparency,
child: Inkwell(
//Fixing the BorderRadius of the Splash
BorderRadius: BorderRadius.only(
topLeft: Radius.circular(folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Icon(
folded ? Icons.search : Icons.close,
color: Color(0xFF88B4E0),
),
),
onTap: () {
setState(() {
folded = !folded;
});
},
)))
],
));
}
}
The error is the following: "The argument type 'dynamic' can't be assigned to the parameter type 'widget'". I would appreciate if someone know why do I get this error, since the Inkwell is wrapped.
Change this code Inkwell to InkWell and BorderRadius: to borderRadius:
child: Material(
type: MaterialType.transparency,
child: InkWell(
//Fixing the BorderRadius of the Splash
borderRadius: BorderRadius.only(
...
I want to implement the modal bottom sheet with a webview as a child in it. When I try to do it, the webview gets messed up and the sheet comes on the top of the screen instead of the bottom.
I tried to change the height but nothing really worked.
Pub dependency: flutter_webview_plugin: ^0.3.5
void _showModelSheet() {
showModalBottomSheet(
context: context,
builder: (builder) {
return new Container(
height: screenHeight / 4,
child: new Container(
decoration: new BoxDecoration(
color: Colors.amber,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(20.0),
topRight: const Radius.circular(20.0))),
child: Container(
child: new MaterialApp(
debugShowCheckedModeBanner: false,
routes: {
"/": (_) => new WebviewScaffold(
url: "https://www.google.com",
),
},
),
),
),
);
});
}
child: RaisedButton(
elevation: 10,
splashColor: Colors.black,
color: Colors.red.shade900.withOpacity(0.7),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(110)),
onPressed: _showModelSheet,
child: Text(
"sheet"),
),
),
I want to make the whole webview to get wrap into the height of the modal bottom sheet.
You are returning a MaterialApp inside another. And the reason is that the plugin you're using forces you to do that.
Better use the oficial Flutter WebView plugin.
webview_flutter: ^0.3.9+1
Then use it like this:
void _showModelSheet() {
showModalBottomSheet(
context: context,
builder: (builder) {
return new Container(
height: MediaQuery.of(context).size.height / 4,
child: new Container(
decoration: new BoxDecoration(color: Colors.amber, borderRadius: new BorderRadius.only(topLeft: const Radius.circular(20.0), topRight: const Radius.circular(20.0))),
child: Container(
child: WebView(
initialUrl: 'https://google.com',
)),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
elevation: 10,
splashColor: Colors.black,
color: Colors.red.shade900.withOpacity(0.7),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(110)),
onPressed: _showModelSheet,
child: Text("sheet"),
),
),
);
}
This is the result: