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.
Related
Im creating a flutter app that requires a user to complete certain tasks in order to stop an alarm clock. Its a more imersive alarm clock app that could help stimulate the brain in order to aid in the process of waking up.
Im having some issues working with the hardware for the application, so to simulate an alarm going off im trying to use the audioplayers package to play an mp3 file once a button is pressed. Im aware that in order to use a local mp3 file I must utilize audio_cache with audioplayers.
when trying to import 'package:audioplayers/audio_cache.dart'; I recive this error
"Target of URI doesn't exist: 'package:audioplayers/audio_cache.dart'. Try creating the file referenced by the URI, or Try using a URI for a file that does exist"
Im also having trouble putting the local mp3 file that I want into my pubspec.yaml. The readMe for audio cache states that I have to place the file in my assest folder and specify the file path in my pubspec under assets. However I do not see an assets folder. I created a file named assets and placed the mp3 in there, but I dont belive this is what I was supposed to do. I also belive that I am placing the file path into my pubspec wrong as well.
Here is my code:
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:audioplayers/audio_cache.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Time Attack',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Time Attack'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
final player = AudioCache();
//bool isPLaying = false;
player.play('musicForapp.mp3');
},
backgroundColor: Colors.red,
child: const Icon(Icons.punch_clock),
),
body: Padding(
padding: const EdgeInsets.all(170),
child: Column(
children: [
Container(
color: Colors.red,
child: const Text(
"Click the Icon in the bottem left to simulate an alarm",
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const TasksPage(),
),
);
}, //on pressed
child: const Text(
"Navigate",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
);
} //widget build
}
class TasksPage extends StatefulWidget {
const TasksPage({super.key});
#override
State<TasksPage> createState() => _TasksPageState();
}
class _TasksPageState extends State<TasksPage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Tasks'),
centerTitle: true,
),
body: Center(
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const MyHomePage(),
),
);
}, //on pressed
child: const Text(
"Navigate",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
);
} //widget build
}
Here is my pubspec.yaml:
name: timeattack2
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=2.18.2 <3.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
audioplayers: ^1.1.1
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
-assets/musicForapp.mp3
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
All in all Here are my issues:
1.) issue importing audio cache package for code
2.) placing the mp3 file in the correct "assest" folder
3.) Specifiying the file path in pubspec.yaml as to where my mp3 file is
Here is the file path for the mp3 file location:
C:\Users\ricky\OneDrive\Documents\School work\Computer Science & cyber security\Mobile programing\Programing Work\timeattack\asset
The mp3 is in my asset folder
Im creating a flutter app that requires a user to complete certain tasks in order to stop an alarm clock. Its a more imersive alarm clock app that could help stimulate the brain in order to aid in the process of waking up.
Im having some issues working with the hardware for the application, so to simulate an alarm going off im trying to use the audioplayers package to play an mp3 file once a button is pressed. Im aware that in order to use a local mp3 file I must utilize audio_cache with audioplayers.
when trying to import 'package:audioplayers/audio_cache.dart'; I recive this error
"Target of URI doesn't exist: 'package:audioplayers/audio_cache.dart'. Try creating the file referenced by the URI, or Try using a URI for a file that does exist"
Im also having trouble putting the local mp3 file that I want into my pubspec.yaml. The readMe for audio cache states that I have to place the file in my assest folder and specify the file path in my pubspec under assets. However I do not see an assets folder. I created a file named assets and placed the mp3 in there, but I dont belive this is what I was supposed to do. I also belive that I am placing the file path into my pubspec wrong as well.
Here is my code:
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:audioplayers/audio_cache.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Time Attack',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Time Attack'),
centerTitle: true,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
final player = AudioCache();
//bool isPLaying = false;
player.play('musicForapp.mp3');
},
backgroundColor: Colors.red,
child: const Icon(Icons.punch_clock),
),
body: Padding(
padding: const EdgeInsets.all(170),
child: Column(
children: [
Container(
color: Colors.red,
child: const Text(
"Click the Icon in the bottem left to simulate an alarm",
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const TasksPage(),
),
);
}, //on pressed
child: const Text(
"Navigate",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
);
} //widget build
}
class TasksPage extends StatefulWidget {
const TasksPage({super.key});
#override
State<TasksPage> createState() => _TasksPageState();
}
class _TasksPageState extends State<TasksPage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.red,
title: const Text('Tasks'),
centerTitle: true,
),
body: Center(
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const MyHomePage(),
),
);
}, //on pressed
child: const Text(
"Navigate",
style: TextStyle(color: Colors.white),
),
)
],
),
),
),
);
} //widget build
}
Here is my pubspec.yaml:
name: timeattack2
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=2.18.2 <3.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
audioplayers: ^1.1.1
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
-assets/musicForapp.mp3
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
All in all Here are my issues:
1.) issue importing audio cache package for code
2.) placing the mp3 file in the correct "assest" folder
3.) Specifiying the file path in pubspec.yaml as to where my mp3 file is
Remove cache import section and try this way
onPressed: () async {
AudioPlayer p = AudioPlayer();
await p.play(AssetSource('assets/musicForapp.mp3'));
},
And yaml
assets:
- assets/musicForapp.mp3
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(),
),
I encountered this problem a few days ago and I was not sure how, but I managed to solve it. I still don't have a clue about what actually causes it. Whenever I create a new flutter project and try to add asset images in my app it throws this error:
======== Exception caught by image resource service ================================================
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/image01
When the exception was thrown, this was the stack:
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:224:7)
<asynchronous suspension>
#1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:672:14)
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "assets/image01")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#abc8a(), name: "assets/image01", scale: 1.0)
====================================================================================================
I surfed for a while to find a solution but I was unable to find one, sometimes I just restart the app and run '''flutter clean''' to fix it but it isn't working this time. I don't know what to do, the pubsec.yaml and and the code seems to be working fine. I've tried creating new projects and rebuilding gradle but it's no good. Please provide descriptive and helpful answers.
Here's the code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.blue,
child: Image.asset('assets/image01'),
),
),
],
),
),
),
);
}
}
And here's pubsec.yaml
name: mi_card
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/
Try below code
Add below code in pubspec.yaml file.
flutter:
assets:
- assets/
uses-material-design: true
and create Image Widget, add your image path that save you in any folder like assets/image.png with your image extension
Center(
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.blue,
child: Image.asset('assets/image01.png'),
),
),
You have to specify the extension of your image (i.e. image01.png)
child: Image.asset('assets/image01.png')
First create folder - best name (images). Put your picture, all of the pictures you want, calling. Then go to the pubspec.yml page edit portion of the picture.
flutter:
uses-material-design: true //two space
assets: //same up space
- images/ //two speace after asset
Then go to your code add all paths. Example:
backgroundImage: AssetImage("images/ss.jpeg"),
I'm new in flutter, just started since last week. I'm learning from the online lesson, then i want to load a image in my flutter app. But there was an error which is :
════════ Exception caught by image resource service ════════════════════════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/image2.jpg
When the exception was thrown, this was the stack:
#0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:225:7)
#1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:670:14)
Image provider: AssetImage(bundle: null, name: "assets/image2.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#9f84b(), name: "assets/image2.jpg", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════
Below is the main.dart code :
import 'package:flutter/material.dart';
void main() =>
runApp(MaterialApp(
home: Home(),
));
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar : AppBar(
title : Text(
"Welcome to HLH",
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
fontFamily: "Goldman",
),
),
centerTitle: false,
backgroundColor: Colors.amber,
),
body: Center(
child: Image(
image : AssetImage("assets/image2.jpg"),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Text("Login"),
),
);
}
}
Can anyone exists me how to solve it? I'm wondering is it the image problem? Thanks^^
This can be a error of not declaring the assets in your pubspec.yaml file.
flutter:
assets:
- images/
Add this to your pubspec.yaml file and then flutter pub get on the app root folder in terminal
I think this problem was caused due to the image path!
Make sure that the path of the image correctly in pubspec.yaml (must be the same with the image path directory).
like this:-
i saved my image in this path "assets/images/cat.png"
Pubspec.yaml file :
flutter:
assets:
- assets/images/