Home / Snippets / Flutter Starter: Center Image Component in Screen
Flutter Starter: Center Image Component in Screen cover

Flutter Starter: Center Image Component in Screen


1 year ago


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"),
          backgroundColor: Colors.green.shade300,
        backgroundColor: Colors.green.shade100,
        body: const Center(
          child: Image(
            image: NetworkImage('https://postsrc.com/img/attr.png'),
            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

notion avatar


Week-end developer currently experimenting with web, mobile, and all things programming.






Support Us

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

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this