Skip to main content

Flutter Image Alignment Respect of Root Container

The Image widget in flutter support alignment in 9 different positions respect of its root container. There are a alignment property of Both local and network image where we will pass Alignment. Alignment are use to align a object in parent area.
Flutter Image Alignment Respect of Root Container

Flutter Image Alignment Respect of Root Container

1. Defining our online image URL in as String.
final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiau15n6tb3GDLqq0HgfxYj-5JS4LSJ0svNQTj7MOF3UKnlGkJLD2wRTWz-0K2qR7vwCVQ5PA4lvlwIvku-VgM1RZn97Bzbl5XpoLXfnJ7GtPahMR9OIQr1QafZb5Kv3TkgCDj0sYcYfx3RRPA43ythqWi85CNDeVJAdvvqgY0d2w6OkbfnAFkDIC051_c4/s16000/heart-icon.png';
2. To set image alignment at top left side we will use Alignment.topLeft property on Image.
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.topLeft,
	))
Screenshot:
Flutter set image alignment top left side
3. To set image alignment in top middle we will use Alignment.topCenter .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.topCenter,
	))
Screenshot:
Flutter set image alignment top center
4. To set image alignment top right side we will use Alignment.topRight .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.topRight,
	))
Screenshot:
Flutter set image alignment top right side
5. To set image alignment at center left side we will use Alignment.centerLeft .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.centerLeft,
	))
Screenshot:
Flutter set image alignment at center left side
6. To set image alignment vertically and horizontally center in root view we will use Alignment.center .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.center,
	))
Screenshot:
Flutter set image alignment vertically horizontally center
7. To set image alignment Center right side we will use Alignment.centerRight .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.centerRight,
	))
Screenshot:
Flutter image alignment center right
8. To set image alignment bottom left we will use Alignment.bottomLeft .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.bottomLeft,
	))
Screenshot:
Flutter bottom left image alignment
9. To set image alignment bottom center we will use Alignment.bottomCenter .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.bottomCenter,
	))
Flutter image alignment bottom center
10. To set image alignment bottom right side we will use Alignment.bottomRight .
Container(
	width: 300,
	height: 300,
	decoration: BoxDecoration(
	  border: Border.all(color: Colors.black, width: 2),
	),
	child: Image.network(
	  imageURL,
	  width: 100,
	  height: 100,
	  fit: BoxFit.none,
	  alignment: Alignment.bottomRight,
	))
Screenshot:
Flutter set image alignment bottom right side
Source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiau15n6tb3GDLqq0HgfxYj-5JS4LSJ0svNQTj7MOF3UKnlGkJLD2wRTWz-0K2qR7vwCVQ5PA4lvlwIvku-VgM1RZn97Bzbl5XpoLXfnJ7GtPahMR9OIQr1QafZb5Kv3TkgCDj0sYcYfx3RRPA43ythqWi85CNDeVJAdvvqgY0d2w6OkbfnAFkDIC051_c4/s16000/heart-icon.png';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
	child: Center(
		child: Container(
			width: 300,
			height: 300,
			decoration: BoxDecoration(
			  border: Border.all(color: Colors.black, width: 2),
			),
			child: Image.network(
			  imageURL,
			  width: 100,
			  height: 100,
			  fit: BoxFit.none,
			  alignment: Alignment.bottomRight,
			))))));
  }
}

Comments