Posts Learn Components Snippets Categories Tags Tools About

Flutter Starter: Center Image Component in Screen

Learn with me to Center Image Component in Screen in Flutter

Created on Sep 18, 2022


In this short snippet I will be showing you how to Center Image Component in Screen in Flutter.

Step 1: Init Flutter Project

First you need to create a new flutter project using "flutter create" command.
flutter create myapp

Step 2: Open project in VS Code or Android Studio

Next you have to open it on your text editor VS Code or Android Studio and run the sample app
image.png 58.07 KB

Step 3: Open main.dart and Update Code

Crate a new StatelessWidget component and in this case I will be calling it "PostSrc". Inside it implement the "build" method that return StatelessWidget and Scaffold. Once you have that you can define the Image widget and have it wrapped with Center widget to place it on the centre of the screen. 
void main() {

class PostSrc extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PostSrc"),
        body: const Center(
          child: Image(
            image: NetworkImage(''),
            width: 300,
Do note that you can have 2 types of Image.
  • NetworkImage
  • AssetImage
And in this snippet we'll be using the NetworkImage which we will reference the image from external resource. Otherwise you need to add the assets image in the project itself.

Run Preview and See the App Running on your Simulator

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️


PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Sponsors 👑

+ Add Yours