2
Answers

assets are not loading the background images on app

Photo of Guest User

Guest User

1y
559
1

Hi Team

I have configured the assets, but somehow my images are not loading. I will share my path for the assets below;

 

C:\Flutter-Projects\Flutter-Furniture-Apps\kikzet_gcizman_decor\assets\icons

// yaml file
 # Add assets here
 assets:
  - assets/icons/bed-reversal.jpg
  - assets/icons/chair.jpg
  - assets/icons/comfort.jpg
  - assets/icons/decor.jpg
  - assets/icons/sofas.jpg

// main.dart
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:kikzet_gcizman_decor/screens/home.dart';



void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Decor Pty Ltd',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const MyHomePage(title: 'Decor Store Pty Ltd'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });

  // Navigate to the selected screen
    switch(index) {
      case 0:
      Navigator.push(
        context, MaterialPageRoute(
          builder: (context)=> HomeScreen()),
          );
          break;
   }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:CarouselSlider(
        options: CarouselOptions(
          height: 200,
          aspectRatio: 16/9,
          viewportFraction: 0.8,
          initialPage: 0,
          enableInfiniteScroll: true,
          reverse: false,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 3),
          autoPlayAnimationDuration: Duration(microseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
        ),
        items:[
          Image.asset('assets/icons/bed-reversal.jpg'),
        ]
        ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.blue,),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite, color: Colors.green),
            label: 'Wishlist',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: Colors.grey),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.login, color: Colors.lightGreen),
            label: 'Login',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}
Markup

Answers (2)

1
Photo of Tuhin Paul
39 34.7k 314.7k 1y

Your suggestion to organize assets by placing them in a dedicated folder and referencing the folder path in the pubspec.yaml file is a good practice for better project organization. This approach makes it easier to manage assets, especially when there are multiple assets of the same type.

However, when specifying the folder path in the pubspec.yaml file, it's important to note that you should include the trailing slash (/) at the end of the folder path to ensure that all assets within that folder are correctly included. Without the trailing slash, only the folder itself will be included, not its contents.

assets:
  - assets/icons/
After adding or modifying assets in the project, running flutter pub get is necessary to update the asset bundle. In case of any issues, running flutter clean followed by flutter pub get can help resolve any inconsistencies.

1
Photo of Md Sarfaraj
137 13.6k 1.1m 1y

Rather than adding assets file in pubspec.ymal like this,


assets: 
  - assets/icons/bed-reversal.jpg 
  - assets/icons/chair.jpg 
  - assets/icons/comfort.jpg 
  - assets/icons/decor.jpg 
  - assets/icons/sofas.jpg

You can add like this


assets: 
  - assets/icons/

and after that you have to do the flutter pub get, If you are still facing the issue then please do the flutter clean and run the flutter pub get command again. mak sure you have created the folder assets/icons in your root project and having all the required icons over there.