How to Align Single Widgets In Flutter ??

· 3 min read
How to Align Single Widgets In Flutter
How to Align Single Widgets In Flutter

Align Widget in itself acts as a container and holds a widget. It contains different properties that help it to define how the child widget should be aligned over its parent. So in this article, we will go through how to Align Single Widgets in the flutter.

How to Align Single Widgets In Flutter ??

To align a child widget within its parent you use the Align widget. If you know how to use the Center widget then you are on the right track because Center is just a special case of Align.

Wrap the widget you wish to align with the Align widget and set its alignment property. For example, this would align a text widget to the middle right of the parent.

Align(
  alignment: Alignment.centerRight,
  child: Text("widget"),
)

Supplemental code

Here is the main.dart code used to make the above examples for your cut-and-paste convenience.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: myLayoutWidget(),
      ),
    );
  }
}

Widget myLayoutWidget() {
  return Align(
    alignment: Alignment(0.7, -0.5),
    child: Text(
      "widget",
      style: TextStyle(fontSize: 30),
    ),
  );
}

You can also use Expanded Widget

Expanded(
  child: Align(
    alignment: Alignment.centerRight,
    child: Text("widget"),
  ),
)

You can use the widget Align, or the Container with the alignment property, see the examples:

With Align:
 Align(
   alignment: Alignment.center,
   child: MyWidget(),
)
With Container:
 Container(
   alignment: Alignment.center,
   child: MyWidget(),
)

Conclusion:

So that was all about aligning single widgets in Flutter!!! Next, we will go through positioned flutter, the main axis alignment flutter, flutter container alignment, flutter column align left, etc. 

So in this article, we have been through how to align single widgets in Flutter ??

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply