In this short snippet I will be showing you how to Center Image Component in Screen in Flutter.
First you need to create a new flutter project using "flutter create" command.
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
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.
Leave a reply