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(),
),
Related
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
this is my pubspec file this is happening every time I want to use the assets image. i use every combination for in asset
name: profile1
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.16.2 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
flutter:
uses-material-design: true
assets:
- assets/*
[enter image description here][1]
[1]: https://i.stack.imgur.com/EJ75N.png
the error is in my pubspec file I cant use my asset images
Error on line 61, column 4: Expected a key while parsing a block mapping.
╷
61 │ assets:
│ ^
╵
Please correct the pubspec.yaml file at
C:\Users\Akshay\AndroidStudioProjects\profile1\pubspec.yaml
Process finished with exit code 1
dart code go to the image part
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: profile(),
));
class profile extends StatelessWidget {
const profile({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
title: Text('profile'),
),
body: Padding(
padding: EdgeInsets.fromLTRB(19, 15, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
using image in image asset Image but the error is in the pubspec file. i use various methods in dart that is not working
child: CircleAvatar(
backgroundImage: new AssetImage("assets/img1.jpeg"),
// backgroundColor: Colors.cyanAccent,
radius: 70,
),
),
),
),
backgroundColor: Color.fromARGB(255, 26, 26, 26),
);
}
}
The pubspec.yaml is indentation sensitive.
assets must be without any indentation at the start of the line. The individual asset entries are one tab level deeper in.
Pubspec.yaml is not set properly.
You should make the asset part as follows :
This is just an example. If you want, you can also export the whole folder as just lib/img/ . The important thing here is the alignment of the codes.
Fisrt of all i am following this guide for localization which is the official guideline of flutter but at
AppLocalizations.of(context)!.helloWorld
It gives error as null
I think this is maybe because I recently updated flutter to 2.10 please confirm if that is the case
I want to achieve this kind of results like English on right and Urdu Language of Left which i don't know how to do that because in samples and guides they just show how to change overall app language not just for some strings
Also for time being, I have used easy_localization: 3.0.0 but still the problem is how i support multiple language at once with this package
Don't use localization for this part - drawer widget - text items
wrap drawer widget with Directionality widget to prevent it from mirroring and make text in the same place.
pop the drawer after using switch widget.
Example:
import 'package:flutter/material.dart' as ltr;
drawer: Directionality(
textDirection: ltr.TextDirection.ltr,
child: Container(
color: Colors.lightGreen,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('English'),
Text('عربي'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('English'),
Text('عربي'),
],
),
],
),
),
),
I am a beginner to Flutter and I tried creating a dummy login page. When I tried to run the app it was flawless on Pixel 3 XL but it was not good in Pixel 2 XL. How would I manage the responsiveness? I came across the MediaQuery widget, but how could I create a completely responsive app for each device? There are many variations among today's mobile devices (like notched display, fullscreen, etc) and thereafter comes the tablets. How could I manage this? Should I write code for each and every resolution?
Here is my design on Pixel 3 XL and Pixel 2 XL
You can use SingleChildScrollView as parent,
SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
),
),
);
Edit: Also remove fit: StackFit.expand, from Stack widget.
The reason behind this problem is the sizedbox widget with height 100px.
removing that and using mainaxisalignment as spaceevenly gives the required output.
Here is the modified code:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
bgimage,
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
logoimage,
userName(),
password(),
forgotPassword(),
loginButton(),
googleSignIn(),
signUp()
],
),
],
),
);
}
This solves the problem.
Best easiest way to make responsive UI for different screen size is Sizer plugin.
Responsive UI in any screen size device also tablet.
Check it this plugin ⬇️
https://pub.dev/packages/sizer
.h - for widget height
.w - for widget width
.sp - for font size
Use .h, .w, .sp after value like this ⬇️
Example:
Container(
height: 10.0.h, //10% of screen height
width: 80.0.w, //80% of screen width
child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);
I have build many responsive UI with this plugin.
Use this package flutter_next using this you design responsive UI even for desktop web and everything and they have an demo also so you can check there
So I'm creating a flutter for web application. A little risky but I really just want an initial prototype, and hopefully by the time I need something production ready it's in at least beta.
Anyways, I'm trying to create a login page, and I can't actually enter anything into the TextFiled.
I've tried adding/removing the TextEdditingController and the input decoration. I've tried a TextField and a TextFormField as well
Widget loginWidget() {
return Container(
width: 650,
child: Card(
margin: EdgeInsets.all(5.0),
color: UiColors.CardBlue,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
MaterialButton(
minWidth: 300,
color: UiColors.CardBlue,
child: Text("Login", style: TextStyle(color: Colors.white),),
onPressed: (){}, // do nothing, this is already the login
),
MaterialButton(
minWidth: 300,
elevation: 10,
color: UiColors.ButtonBlue,
child: Text("Register", style: TextStyle(color: Colors.white),),
onPressed: toggleLogin,
)
],
),
TextField(
controller: usernameController,
decoration: InputDecoration(
border: InputBorder.none,
labelText: "Email Address",
hintText: "user#email.com"
),
)
],
),
),
);
}
EDIT: This only seems to effect firefox, works in chrome
In the github repo of flutter_web, it says
"The development workflow is only designed to work with Chrome at the moment."
https://github.com/flutter/flutter_web
At this time, it looks like your prototype development is limited to a chrome browser.
I Know it is late but I will answer this for the use of others. Flutter is currently in process of completing its framework for web. So, the fact that the TextField is not working is due to the version of flutter_web. Therefore I recommend you to use older issues from github in your pubspec.yaml file like below:
name: newweb
description: An app built using Flutter for web
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0-dev.0.1 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
provider: any
rxdart: ^0.22.0
http: ^0.12.0+2
json_annotation: ^2.4.0
intl: 0.15.8
firebase: any
dev_dependencies:
build_runner: ^1.4.0
build_web_compilers: ^2.0.0
pedantic: ^1.0.0
json_serializable: ^3.0.0
test: any
flutter:
uses-material-design: true
dependency_overrides:
flutter_web:
git:
ref: cc38319
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
provider:
git:
url: https://github.com/kevmoo/provider
ref: flutter_web
I tried all the solutions but couldn't fix it. Whatever I was typing in TextField or TextFormField or autocomplete_textfield, the characters were not visible.
I fixed it by opening the Widget as a showGeneralDialog() instead of using Navigator.of(...). Here is the sample code.
await showGeneralDialog(
barrierColor: AppStyle.primaryColor.withOpacity(0.3),
transitionBuilder: (context, a1, a2, widget) {
return Transform.scale(
scale: a1.value,
child: Opacity(opacity: a1.value, child: WidgetScreenToOpen()),
);
},
transitionDuration: Duration(milliseconds: 500),
barrierDismissible: true,
barrierLabel: 'Label',
context: context,
pageBuilder: (context, animation1, animation2) {
return Container();
}).then((result) {
return result;
});