I have upgraded my flutter version from 3.3.10 to 3.7.0 and now getting the following error.
ModalBottomSheetRoute' is imported from both 'package:flutter/src/material/bottom_sheet.dart' and 'package:modal_bottom_sheet/src/bottom_sheet_route.dart
I tried to follow this Error: 'ModalBottomSheetRoute' is imported from both but solutions didn't work for me.
import 'package:modal_bottom_sheet/src/bottom_sheet_route.dart' as mymodal;
mymodal.showModalBottomSheet(
context: context,
// color is applied to main screen when modal bottom screen is displayed
barrierColor: Colors.greenAccent,
//background color for modal bottom screen
backgroundColor: Colors.yellow,
//elevates modal bottom screen
elevation: 10,
// gives rounded corner to modal bottom screen
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
builder: (BuildContext context) {
// UDE : SizedBox instead of Container for whitespaces
return SizedBox(
height: 200,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text('GeeksforGeeks'),
],
),
),
);
},
);
Make Sure you follow the Migration Guide for flutter 3.7
modal_bottom_sheet:
Update to modal_bottom_sheet: ^3.0.0-pre
Rename any ModalBottomSheetRoute class reference to ModalSheetRoute
sheet:
Update to sheet: ^1.0.0-pre
have a look at the below link:
https://github.com/jamesblasco/modal_bottom_sheet/issues/325
After the Flutter 3.7 update, my project started getting this error, however I don't use the ModalBottomSheet package, at least not directly, a another package I'm using, might be using it, so for now, the workaround (while a formal fix is in place) I added the following dependency override in the pubspec file, and problem solved
dependency_overrides:
modal_bottom_sheet: ^3.0.0-pre
Related
I am working on a flutter web Project, I need to display some countries as tiles like below. The Flag Image is is displayed when I run them in release or debug mode, But after I deployed them to firebase, The image is not displayed, and not any errors are displaying while I was checking in debug mode.
I have tried building in html renderer also, it didn't help.
The image I'm trying to display is from this package,
https://pub.dev/packages/country_icons
Weirdly, The same widget is working good on another screen within the same application.
I have tried importing the flag pngs to local and made them as assets, still I got the same output, Instead of the below widget I used ListTile with the leading flag, same behaviour.
This is when I run in debug/release mode
This is after I deployed the code into firebase.
pubspec.yaml below,
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
country_icons: ^2.0.2
Below is my widget.
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 3,
child: Card(
shadowColor: Colors.grey[600],
elevation: 5,
color: Colors.white,
child: Row(
children: [
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image(image: AssetImage('icons/flags/png/$code.png', package: 'country_icons')),
),
),
Expanded(flex: 3, child: Text(text)),
],
),
),
);
}
Any help is appreciated, Thanks
Adding a toLowerCase() method solved the problem, Turns out, fetching being case insensitive in local, but after deployed, the file names are behaving as case-sensitive.
CountryCard(
text: e.name,
code: e.code.toLowerCase(),
),
The widget is always displayed on the screen, just like in iOS, adding controls to the window. How to achieve it, thank you! Grateful!
Add this to your MaterialApp to remove it
MaterialApp(
debugShowCheckedModeBanner: false,
)
You can use Banner widget that actually displays debug banner.
docs link : https://api.flutter.dev/flutter/widgets/Banner-class.html
Banner(
location: BannerLocation.topEnd,
message: "",
child: Icon(Icons.help), //you can pass anything here as widget
color: Colors.transparent,
),
Have a look at this. Flutter provides a default Banner widget.It is somewhat similar to the debug banner what we are used to of seeing on the top-right corner on a flutter app in debug mode.
https://api.flutter.dev/flutter/widgets/Banner-class.html
You can use Stack Widget to overlay Widgets over one another. For example:
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)
The Banner widget realises this by creating a CustomPainter, take a look at the Implementation. But I think a Stack would be the better choice here if you are using Widgets.
I'm making a learning app with flutter.
In our app, you have to put a button over the picture.
So, using positioned on the picture, I made it like the picture below.
#override
Widget build(BuildContext context){
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
image: AssetImage("assets/oral_structure.png"),
fit: BoxFit.fitWidth
),
Positioned(
top:385, left:17,
child: FlatButton(
child: Text('ㅂ', style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold)),
shape: CircleBorder(),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => B()),);
},
)
),//ㅂ
However, the problem with this is that the position of the buttons changes when using a phone with a large screen.
What can be done to prevent this?
The button seems always in the same place. It should be independent of screen size.
I suspect your problem is rather with the fontSize of the text.
Try to remove the fontSize:, it should fix your problem
EDIT 1:
the problem is with fit: StackFit.expand, that forces the button to expand. You can keep it but wrap your button inside a SizedBox
const SizedBox(
width: 200.0,
height: 100.0,
child: FlatButton(// your code here...),
)
Try to get the width and height of screen, and calculate base on that with a radio.
I'm using Rubber library at the moment, do you know an approach without using 3rd parts libraries?
The Bottom Sheet must be persistent (not dismissable, not triggered by any button instead, always displayed) and draggable (It must be expanded and collapsed by dragging gestures)
Perhaps DraggableScrollableSheet could work?
I haven't yet tried it out myself, but maybe you could fiddle with a listview to make it work.
I'm guessing something like having it's child be a listview, and then limit both the max child size and the maximum scroll extent
If you do not care that the bottom sheet must snap to different positions you can use the widget from the following package (snapping_sheet) I made.
Or, if you do not want to use it as a 3rd part library, you can copy the code and use it as your own widget from repository here: Github - Snapping sheet
Use DraggableScrollableSheet. Here's an example:
Stack(
children: [
Container(), //the page under the DraggableScrollableSheet goes here
Container(
height: MediaQuery.of(context).size.height,
child: DraggableScrollableSheet(
builder: (BuildContext context, myscrollController) {
return Container(
color: Colors.blue,
child: ListView.builder(
controller: myscrollController,
itemCount: 40,
itemBuilder:(BuildContext context, int index) {
return ListTile(title: Text('Item $index',
style: TextStyle(color: Colors.black),
));
},
),
);
},
),
),
],),
I am creating a new page route PopupRoute and using a Stack as the root of the new popup page. It works fine until I add Text to its children. Text will have two yellow lines underneath. I tried Material(child:Stack()) and Scaffold(child:Stack()). It can fix the yellow line issue, but it covers the entire screen and make the barrierDismissible not work.
Are there any other widgets can solve the Text yellow issues in my case?
You just need to wrap your Text widget inside a DefaultTextStyle widget. A DefaultTextStyle widget gets added implicitly by the Scaffold or Material widget.
DefaultTextStyle(
style: TextStyle(),
child: Text("This is a test"),
),
There might be a cleaner solution, but the first thing I thought of is wrapping Material inside of Align widget.
e.g.
showDialog(context: context, barrierDismissible: true, builder: (context) {
return Stack(alignment: Alignment.center, fit: StackFit.loose, children: <Widget>[
Container(width: 100, height: 100, color: Colors.blue),
Align(
child: Material(
type: MaterialType.transparency,
child: Text("TEXT"),
)
),
]);
});