Flutter background image example

Before making one, Most of the below examples, images are loaded from the Assets directory.

So you need to define it in pubspec.yaml. At the same time, You need to create an assets folder and put the image in there.

  assets:
    - assets/


Let’s start with a simple one.

1. How To Add Background Image To Container?

flutter add background image to container

  • Using the decoration property of a Container, we can easily add a background image.
decoration: BoxDecoration(
                       image: DecorationImage(
              image: AssetImage('assets/fitness.jpg'),
              fit: BoxFit.cover,
            ),
          )

Using above code inside Container, You can add Image as background.

Let’s make the above example.

  • In this example, Center Widget used to align the Text Widget.
  • Container’s margin property set free space around Container. You can also use Padding.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Add Background Image To Container Example'),
        ),
        body: Container(
          margin: EdgeInsets.all(8.0),
          child: Center(
            child: Text(
              'FITNESS',
              style: TextStyle(
                backgroundColor: Colors.black38,
                fontSize: 25.0,
                color: Colors.white,
              ),
            ),
          ),
          width: double.infinity, //stretches to maximum width
          height: 200.0,
          decoration: BoxDecoration(
                        image: DecorationImage(
              image: AssetImage('assets/fitness.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

  • Don’t forget to add assets in pubspec.yaml.

Let’s make rounded corners to Container

set background image rounded container

              decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.circular(10.0), //makes the border circular
                image: DecorationImage(
                  image: AssetImage('assets/fitness.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
  • borderRadius: BorderRadius.circular(10.0) – It makes borders rounded.

2. Flutter background image full-screen Example

In this example, you will learn how to set an image as the background and make it to full screen.

Flutter Image Container full screen example

  • constraints: BoxConstraints.expand() – It makes container to use maximum width and height. If width and height values not provided.
  • Using center and Column widgets, Text widgets can align to center.
  • Here, SizedBox just gives some empty space between the Text widgets.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/sky.jpg'),
              fit: BoxFit.cover,
            ),
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'ANDROIDRIDE',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 35.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  'Flutter Image BackGround \n Full Screen Example',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

3. Flutter Background Image Full Screen Example Using Stack

Above Example, I have used Container to set Image as background. In this one, We will use Stack.

Okay…Let’s do it.

flutter background image full screen stack

  • Positioned.fill() – it makes image to fill the entire screen.
  • Using Positioned widget, you can align Widgets in Stack.
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //resizeToAvoidBottomInset: false,
        body: Stack(
      children: [
        Positioned.fill(
          child: Image(
            image: AssetImage("assets/mystery.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          top: 330,
          left: 70,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'ANDROIDRIDE',
                style: TextStyle(
                  backgroundColor: Colors.black54,
                  fontSize: 35.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              Text(
                'Flutter background Image Using Stack',
                style: TextStyle(
                  backgroundColor: Colors.black87,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              )
            ],
          ),
        ),
      ],
    ));
  }
}


Flutter Background Image Blur Example

In Flutter, you can easily make images blur. Let’s use BackdropFilter, ImageFilter.blur() and make this example.

Okay…Let’s see the final output.

flutter bacground image blur backdropfilter

  • BackdropFilter widget won’t give blur effect to its child but beneath it – Here AssetImage
  • Using ImageFilter.blur value, you can control the blur effect.
  • In this example, I have used black color with opacity, this helps viewers to read text easily.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/sky.jpg'),
              fit: BoxFit.cover,
            ),
          ),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.3),
              ),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'ANDROIDRIDE',
                      style: TextStyle(
                        fontSize: 35.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      'Flutter Background Image Blur Example 1',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter Background Blur Image using Stack.

In this example, you will learn how to make image blur using ImageFiltered Widget.

flutter background blur image using stack

  • In this example, ImageFiltered widget is used to create blur effect.
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          Positioned.fill(
            child: ImageFiltered(
              imageFilter: ImageFilter.blur(
                sigmaX: 10.0,
                sigmaY: 10.0,
              ),
              child: Image(
                image: AssetImage("assets/mystery.jpg"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned(
            top: 320,
            left: 60,
            child: Column(
              children: [
                Text(
                  'ANDROIDRIDE',
                  style: TextStyle(
                    backgroundColor: Colors.black12,
                    fontSize: 35.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  'Flutter Background Blur Image Using Stack',
                  style: TextStyle(
                    backgroundColor: Colors.black12,
                    fontSize: 15.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}


6. Flutter Fullscreen Image Using URL

Actually, this example is not necessary. Because we already did it using AssetImage. Here we just changing with NetworkImage. Sometimes, this may help beginners.

fullscreen image using URL (NetworkImage)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  'https://images.pexels.com/photos/2102367/pexels-photo-2102367.jpeg'),
              fit: BoxFit.cover,
            ),
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'ANDROIDRIDE',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 35.0, color: Colors.white),
                  ),
                ),
                Text(
                  'Flutter Image BackGround Full Screen - NetworkImage',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


How To Add Gradient Over Full Screen Image?

Let’s make a gradient overlay over the image and display it.

flutter gradient on top of image

  • You can set Gradient using gradient property of BoxDecoraion.
  • LinearGradient begin and end property defines where to start and end gradient color.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Container(
              constraints: BoxConstraints.expand(),
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2019/03/13/11/04/copenhagen-4052654_1280.jpg',
                  ),
                ),
              ),
            ),
            Opacity(
              opacity: 0.85,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Colors.red,
                        Colors.blue,
                      ]),
                ),
              ),
            ),
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'ANDROIDRIDE',
                    style: TextStyle(
                      fontSize: 35.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  Text(
                    'Flutter Background Image Full Screen Gradient ',
                    style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}



Flutter Login Page with Background image

Let’s make a Login page with form validation.

Looks nice. isn’t it?

flutter login page with background image

  • When the User tap on ElevatedButton (You can use RaisedButton, FlatButton or FloatingActionButton) after typing username and password, control goes to _printFormValues() method.
  • If the validation is successful, It will print form values. Otherwise, shows validation errors.

Validation Demo:

flutter login page with validation

    • Using Form and TextFormFields, It’s easier to make a login page and also helpful to validate the inputs.
    • autofocus:true enables focus on username TextFormField.

text input action next

  • When username is typed and taps on the softkeyboard bottom Right Corner key defined using textInputAction: TextInputAction.next. It calls onFieldSubmitted(), and Change focus to next TextFormField.
class _MyAppState extends State {

  final white = Colors.white;
  final _passwordFocusNode = FocusNode();
  bool hidePassword = true;
  final _formKey = GlobalKey();


  final outlineInputBorder = OutlineInputBorder(
    borderRadius: BorderRadius.all(
      Radius.circular(10.0),
    ),
    borderSide: BorderSide(color: Colors.white),
  );


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Center(
          child: Container(
            constraints: BoxConstraints.expand(),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/subway.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: SingleChildScrollView(
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Form(
                    key: _formKey,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        SizedBox(
                          height: 150,
                        ),
                        Text(
                          'ANDROIDRIDE',
                          style: TextStyle(
                            fontSize: 36,
                            color: white,
                          ),
                          textAlign: TextAlign.center,
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        TextFormField(
                          autofocus: true,//autofocus enabled.
                          onSaved: (newValue) 
                          {
                            //prints value when _formKey.currentState.save();
                            print("Username: $newValue");
                          },
                          validator: (value)//provides value in TextFormField
                          {
                            if (value.isEmpty) 
                            {//TextFormField is empty, show below text
                              return 'Please type your username';
                            }
                            //return null means successful validation.
                            return null;
                          },
                          onFieldSubmitted: (_) 
                          {//change Focus to next TextFormField (here password TextFormField)
                            FocusScope.of(context)
                                .requestFocus(_passwordFocusNode);
                          },
                          //soft keyboard shows next icon in bottom right corner
                          textInputAction: TextInputAction.next,
                          style: TextStyle(
                            color: white,
                          ),
                          maxLines: 1,
                          decoration: InputDecoration(
                            hintText: 'Username',
                            focusedBorder: outlineInputBorder,
                            border: outlineInputBorder,
                            hintStyle: TextStyle(
                              color: white,
                            ),
                            prefixIcon: const Icon(
                              Icons.account_circle_outlined,
                              color: Colors.grey,
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        TextFormField(
                          maxLines: 1,
                          obscureText: hidePassword,//true hides password, false shows.
                          focusNode: _passwordFocusNode,
                          onSaved: (newValue) 
                          { //print value when _formKey.currentState.save() calls.
                            print("Password: $newValue");
                          },
                          validator: (value) 
                          {
                            //validates when _formKey.currentState.validate() calls.
                            if (value.isEmpty) {
                              return 'Enter your password';
                            }
                            if (value.length < 4) {
                              return 'password must be at least 4 characters';
                            }
                            return null;
                          },
                          style: TextStyle(
                            color: white,
                          ),
                          decoration: InputDecoration(
                            hintText: 'Password',
                            focusedBorder: outlineInputBorder,
                            border: outlineInputBorder,
                            hintStyle: TextStyle(
                              color: white,
                            ),
                            prefixIcon: const Icon(
                              Icons.lock_open_outlined,
                              color: Colors.white54,
                            ),
                            suffixIcon: IconButton(
                              onPressed: () {
                                setState(() 
                                {
                                  hidePassword = !hidePassword;
                                });
                              },
                              icon: Icon(
                                hidePassword
                                    ? Icons.visibility
                                    : Icons.visibility_off,
                                color: Colors.white70,
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: ElevatedButton(
                            style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all(
                                  Colors.white24),
                            ),
                            onPressed: () {
                              //calls _printFormValues() method
                              _printFormValues();
                            },
                            child: Text('LOGIN'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}


  • When both TextFields submitted and ElevatedButton tapped, it calls _printFormValues() method.
  • _formKey.currentState.validate() calls, it internally calls validator in TextFormFields, validates and returns true if there are no errors.
  • Otherwise shows text message which specified in validator.
  • _formKey.currentState.save() internally calls onSaved when there are no validation errors.
  • resizeToAvoidBottomInset: false, prevents resizing body.
  • Don’t forget to dispose the FocusNode.
  void _printFormValues() {
    final _isTrue = _formKey.currentState.validate();

    if (!_isTrue) {
      return;
    }
    _formKey.currentState.save();
  }

  @override
  void dispose() {
    _passwordFocusNode.dispose();
    super.dispose();
  }


flutter login page output

That’s all for now. Thank you.

More Information : Container Docs

Please disable your adblocker or whitelist this site!