How To

How To Add An Image Asset To A Container In Flutter

One simple way and productive method to build/create an amazing application is by adding an image/picture to beautify or define a particular thing in your flutter app. Here, we’ll be talking about how you can add an image asset of NetworkImage to a container in Flutter, and make your app look very attractive and beautiful.

Firstly, what is a Container in Flutter? A container in flutter is simply a powerful widget that makes up building, positioning, and sizing other child widgets. You can use Container to any widgets to add some styling properties. A container allows you to customize, create, manipulate, and build other widgets. Let’s see a Container as a house with a roof, and other child widgets are the chairs, bed, and many other things that make a house.

This step can also be used in adding image to your Application anytime or anywhere, even if it’s not a container, this approach would still work. We also would not need to impost any package from pub.dev in this tutorial.

Firstly, Let’s see what will be the outcome after this tutorial. i.e the output of our application.

Create Your “Images” folder and add your image

All you need to do here is to drag your image to the “images” folder in your flutter files, then add the image directory to the assets in your pubspec.yaml (very important), as this allows your image to be visible in your Flutter application generally. See example below;

 # To add assets to your application, add an assets section, like this:
  assets:
    - images/techllyn.png

Don’t forget to run the “package get” after adding your image directory to the pubspec.yaml file (important).

Now, going back to your main.dart file, you’ll need to apply this simple code below. Also note that the container would have a child, which would be “decoration” as you see in the code below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image To Container',
      theme: ThemeData(
        
        primarySwatch: Colors.pink,
       
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ContainerImage(),
    );
  }
}
class ContainerImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Add Image to Container"),
        centerTitle: true,
        
      ),
      backgroundColor: Colors.black12,

      body: Center(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage('images/techllyn.png'), fit: BoxFit.contain),
          ),
        ),
      )
     
    );
  }
}

Let’s assume you want to add an image from the internet, you’d need to skip the part where you’ll have to add image directory to the pubspec.yaml file, and simply add your image link with a “NetworkImage” class instead. See the code below;

body: Center(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: NetworkImage('https://www.techllyn.com/wp-content/uploads/2020/04/Techllyn-Header- 
                                   Logo-300x61.png'), fit: BoxFit.contain),
          ),
        ),
      )

Output

image in a container flutter sample

You’ll notice the second image above has a defined width and height of the container. That is show the its a container not a Scaffold background.
If you followed the step by step instruction above, You should get an image working very fine in any container. Yes, It’s that easy. Do well to drop a comment if you encounter any problem or error. It would be attended to.

Flutter makes Mobile development easy and flexible. You’re in the right track.

CL!CK HERE TO READ THE DOWNLOAD GUIDE AFTER DOWNLOADING THE FILE

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.