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

15 views

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() {
  runApp(PostSrc());
}

class PostSrc extends StatelessWidget {
  @override
  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

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

)