Image widget did not support margin property directly but using the Container widget we can easily apply Margin property on Image widget for all 4 Left, Right, Top and Bottom side. Margin is one of the most usable property for development purpose because using the margin we can easily set empty space around a Image so the Image won’t touch or disturb other widgets. So in this tutorial we would Add Apply Margin to Image Widget in Flutter Android iOS Example Tutorial.
Contents in this project Add Apply Margin to Image Widget in Flutter Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main Root MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root view class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Now we would create Widget Build area in MyApp class. In widget build are we would first create the App bar then in body section we would create the Center widget. Now we would make the Row widget in Center widget because i will apply margin on 2 images and for two widgets we have to use Multiple children supported widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Apply Margin To Image Widget in Flutter'), ), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ], ), ))); } |
5. Creating 2 Container widget with 2 Images widget wrap inside it. We are calling the image from online HTTP URL.
- margin : We would use the EdgeInsets.fromLTRB() parameter. Here the LTRB means Left, Top, Right and Bottom. We have to pass 4 double float type values here which used for 4 different directions.
|
1 2 3 4 5 6 7 8 9 10 11 |
Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 20), child: Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 120, height: 120, fit: BoxFit.contain,)), Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 20), child: Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 120, height: 120, fit: BoxFit.contain,)), |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Apply Margin To Image Widget in Flutter'), ), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 20), child: Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 120, height: 120, fit: BoxFit.contain,)), Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 20), child: Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 120, height: 120, fit: BoxFit.contain,)), ], ), ))); } } |
Screenshot:
