Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Display background image in Flutter

How to display background image in flutter ?

Aman Jain, January 15, 2022August 29, 2022

In our recent article i showed you to display local or remote image in flutter application but in some cases we need to show our image in background so we can put additional content on it. Background image is useful to show when we wanted to show full image in our container and then content over it. so in this article i will show you to use background image using BoxDecoration property of container.

In BoxDecoration we can use image parameter to decorate the container to show background image to it.

Let’s understand background image in flutter with example

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder .

Step 2 : Configure image directory in pubspec.yaml

Next step is create the assets directory and configure it in pubspec.yaml file in flutter assets block as below

flutter:
  assets:
    - directory/
    - directory/subdirectory/
    - directory/subdirectory/image.png
    - directory/variations/image.png

you can either directory location to allow all directory images or also specific files.

Example :

name: example_app
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 used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.15.1 <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


  # 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: ^1.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.
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/images/

  # 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
Screenshot 2022 01 02 at 6.15.24 PM
Asset Image directory flutter

And update the pub using command

flutter --no-color pub get

Step 3 : Create a simple widget

Now, Create a simple stateless widget to show the background image and it will consist a container and dummy text to show the background image

File : lib/BackgroundImageDemo.dart

class BackgroundImageDemo extends StatelessWidget {
  const BackgroundImageDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Readerstacks Background image'),
            ),
            body: Scaffold(
              body: Container(
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('assets/images/flutter.png'))), 
  // 
 //image :  NetworkImage('https://picsum.photos/id/237/300/300')

                  child: const Center(
                      child: Text(
                    "I am Content on Image",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.amberAccent,
                        fontSize: 24
                    ),
                  ))),
            )));
  }
}

Step 4: Import and use the widget in main

We just created a new widget with name remoteimagedemo, now we are going to use it in our main.dart file as below

import 'package:flutter/material.dart'; 
import 'package:example_app/BackgroundImageDemo.dart';;

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

Step 5: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

Live Preview and code:

Related

Flutter Dart background imageBoxDecorationFlutter

Post navigation

Previous post
Next post

Related Posts

Dart Create rounded corner using border radius in flutter

Create rounded corner using border radius in flutter ?

September 15, 2022March 16, 2024

Rounded corner gives a decent look to any widget and rounded corner can be create using the border radius property of container. we can add border radius or shape to any container, image, button, text, input and etc. so in this article we will learn to create rounded corner using…

Read More
Flutter How to Use Hash Hexadecimal Color Code in flutter

How to Use Hash Hexadecimal Color Code in flutter ?

September 13, 2022March 16, 2024

Flutter provides color class to use only integer value and RGB value but to use hash hexadecimal color code in flutter we need to add extra efforts so that we can use hash based hexadecimal string in flutter. Hexadecimal colors are those colors which starts with # char. Flutter Color…

Read More
Dart Navigating between pages in flutter

How to navigate between one page to another in flutter ?

January 4, 2022January 15, 2022

Flutter provides its inbuilt navigator to navigate between pages. In our application it must have multiple screens and we wanted to navigate on all screens so in flutter we use Navigator class to navigate between pages. In android we use Activity and in iOS we use ViewController to navigate between…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version