Motivational quote app: Add background image to your flutter app Ep.9 Pt.1

Create a directory called assets in you project root directory and inside that directory create another directory called images and add your images to that images directory. Below you can find the link to download images that I used for these few tutorials.

In the pubspec.yaml file find the flutter section add assets section and add images paths to it like in the yaml file below.(/p>

Now, goto main.dart file and delete all the code. Next, import the material file and add the main method with runApp method call.

import 'package:flutter/material.dart';

void main() => runApp(new QuoteApp());

In above line, you can see I have created a anonymous object as the argument to the runApp. That is a StatelessWidget, we are going to create now.

You can use code template to easily create a StatelessWidget stless then press enter or in IntelliJ if did not get intellisence press tab key.

class QuoteApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container();
  }
}

Now, inside the build method return a material app not container. with title and home property.

title: 'Motivational Quote App',
home:

For the home property add a Scaffold with body property and we are going to to add Stack widget to the body property because we need widgets on top of background image. In this case a text widget.

home: new Scaffold(body: new Stack(children: []),

Now, as a children add a Container widget with a BoxDecoration. And for the image property of BoxDecoration add a AssetImage with image URL and to cover the whole screen we have to use fit property with BoxFit.cover, as below:

body: new Stack(
  children: [
    new Container(
      decoration: new BoxDecoration(
        image: new DecorationImage(
          image: new AssetImage('assets/images/bill-gates.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    ),
  ]
),

Now we have completely added the background image to our flutter app. Now you can add Text widget in top of the image by adding Text Widget as a children of Stack Widget like below:

new Center(
   child: new Text('Never give up'),
)

I have centered the text using Center Widget.

Complete dart, and yaml file and images are below:

pubspec.yaml

	name: motivational_quote_app
	description: A new Flutter project.
	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: ^0.1.0
	dev_dependencies:
	flutter_test:
	sdk: flutter
	# For information on the generic Dart part of this file, see the
	# following page: https://www.dartlang.org/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:
	# - images/a_dot_burr.jpeg
	# - images/a_dot_ham.jpeg
	assets:
	- assets/images/bill-gates.jpg
	- assets/images/steve-jobs.jpg
	- assets/images/mark-zuckerberg.JPG
	- assets/images/jerry-west.jpg
	- assets/images/bill-hicks.jpg
	- assets/images/jim-rohn.jpg
	- assets/images/Oscar_wilde.jpg
	- assets/images/carlos-castaneda.jpg
	- assets/images/thomas-edison.jpg
	- assets/images/bruce-van-horn.jpg
	- assets/images/WaltDisney.jpg
	- assets/images/john-lennon.jpg
	- assets/images/huxley-lsd.png
	- assets/images/bruce-lee.jpg
	# An image asset can refer to one or more resolution-specific "variants", see
	# https://flutter.io/assets-and-images/#resolution-aware.
	# For details regarding adding assets from package dependencies, see
	# https://flutter.io/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.io/custom-fonts/#from-packages

view raw pubspec.yaml hosted with ❤ by GitHub

main.dart

	import 'package:flutter/material.dart';
	void main() => runApp(new QuoteApp());
	class QuoteApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return new MaterialApp(
	title: 'Motivational Quote App',
	home: new Scaffold(
	body: new Stack(
	children: <Widget>[
	new Container(
	decoration: new BoxDecoration(
	image: new DecorationImage(
	image: new AssetImage('assets/images/bill-gates.jpg'),
	fit: BoxFit.cover,
	),
	),
	),
	new Center(
	child: new Text('Never give up'),
	)
	],
	)),
	);
	}

view raw background_image.dart hosted with ❤ by GitHub

Some or all images may not free to use. Please only use for learning purposes. You can have you own images
or you can edit/customise images.

Also you can have images with varies resolutions. So that your images will scale occording to the device.

Download images that I used

Follow my previous tutorial for that.