How to align widgets in Flutter

I recall when I began utilizing Flutter, there were a ton of utilization cases as far as arrangement, where I didn’t know precisely how to move toward them. I consider arrangement gadgets is quite possibly the main parts in Flutter UI (for what it’s worth in web advancement) and Flutter made it appallingly simple to do as such, given that you know the correct gadgets/way to deal with use.

In this arrangement, I will not delve extremely profound into the specialized subtleties of every gadget that I portray but instead will give commonsense models with use cases.

How to align single widgets in Flutter

For this use case, we can use the Align widget which lets us align our widget in 9 places in the parent widget:

  • topLeft
  • topCenter
  • topRight
  • centerLeft
  • center
  • centerRight
  • bottomLeft
  • bottomCenter
  • bottomRight

We just got to define what alignment we would like and what widget we would like to align. during this case, we elect for Alignment.topCenter and that we are aligning a Container with a Text because the child.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Align(
        alignment: Alignment.topCenter,
        child: Container(
          color: Colors.lightBlue,
          child: Text(
            'exerror.com',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }

Which will obviously look like this:

How to align widgets in Flutter

Or we could try Alignment.centerLeft, which will look like this:

How to align widgets in Flutter

You can try other variants of alignment and see what happens. i feel you get the thought . For Alignment.center, there’s a shortcut available which are going to be a bridge to our next use case.

How to center a widget horizontally and vertically in Flutter

There is a really useful widget called Center that takes a toddler widget and aligns it within the center of the parent widget. This works precisely the same because the Align widget with Alignment.center parameter.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.lightBlue,
          child: Text(
            'exerror.com',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }

Use case: How to create a list item using Row widget in Flutter

I’m getting to show you ways to make a pleasant list item employing a Row widget. this is often an honest example because during a list item the knowledge is aligned horizontally. Let’s say we would like to point out an inventory of contacts like we’ve in WhatsApp and that we want to define how each of those list items will appear as if . Let’s say we’ve the subsequent requirements:

  • An Avatar
  • The name of our contact
  • List item must be clickable with some visual feedback
  • The widgets inside Row must be aligned nicely

First, we’d like an avatar for our contact. Flutter provides us with a really nice widget called CircleAvatar that provides you a ready-to-use circular widget specially made for this purpose. So we’ll use that one. We define a background color for our avatar and take the primary letter of our contact rather than a picture . For the name of our contact, we’ll be using the Text widget obviously.

Our widget structure will appear as if this:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Row(
        children: <Widget>[
          CircleAvatar(
            backgroundColor: Colors.blue,
            child: Text(
              'J',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          Text('John Doe'),
        ],
      ),
    );
  }

And will look like this on our device:

How to align widgets in Flutter

It doesn’t look very great, but it’s an honest start. First of all, our Row is just too on the brink of the left and therefore the top. Somehow we’d like to feature distance between the Row and therefore the parent widget. we’ll use a Container for that with small padding.

The next thing we probably want to repair is that the incontrovertible fact that the text and therefore the avatar are too on the brink of one another . we’ll put a SizedBox between them with the specified width.

Lastly, we wrap our Row inside an InkWell. InkWell provides us with GestureDetector (which gives us an onTap callback) plus visual feedback.

The improved code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: InkWell(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Row(
            children: <Widget>[
              CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text(
                  'J',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
              SizedBox(
                width: 16.0,
              ),
              Text('John Doe'),
            ],
          ),
        ),
        onTap: () {
          // do something here
        },
      ),
    );
  }

And will look like this on our device:

How to align widgets in Flutter

It looks much better now and it’s tappable. Of course, there are many more use cases where you would be using the Row widget, but the principle stays the same.

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

TypeError: this.getOptions is not a function in vue.js

Leave a Comment

x