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

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:

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:

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:

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:

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:

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:

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:

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,
	))

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:

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,
			))))));
  }
}