How to use Row and Column in Flutter with examples

Row and Column may be the most significant (multi-youngster) format gadgets in Flutter. Line and Column let you adjust kid gadgets evenly and vertically. On the off chance that you are a web engineer, you can contrast them and a div with the accompanying properties in CSS:

.row {
 display: flex;
 flex-direction: row; // this is the default
}

.column {
 display: flex;
 flex-direction: column;
}

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

I’m demonstrating how to make a pleasant rundown thing utilizing a Row gadget. This is a genuine model in light of the fact that in a rundown thing the data is adjusted evenly. Suppose we need to show a rundown of contacts like we have in WhatsApp and we need to characterize how every one of these rundown things will resemble. Suppose we have the accompanying necessities:

  • An Avatar
  • The name of our contact
  • Rundown thing should be interactive with some visual criticism
  • The gadgets inside Row should be adjusted pleasantly

To start with, we need a symbol for our contact. Vacillate furnishes us with a pleasant gadget considered CircleAvatar that gives you a prepared to-utilize roundabout gadget uncommonly made for this reason. So we will utilize that one. We characterize a foundation tone for our symbol and take the principal letter of our contact rather than a picture. For the name of our contact, we will utilize the Text gadget clearly.

Our widget structure will look like 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:

It doesn’t look extraordinary, yet it’s a decent beginning. Most importantly, our Row is excessively near the left and the top. By one way or another we need to add distance between the Row and the parent gadget. We will utilize a Container for that with little cushioning.

The following thing we presumably need to fix is the way that the content and the symbol are excessively near one another. We will put a SizedBox between them with the ideal width.

In conclusion, we wrap our Row inside an InkWell. InkWell gives us GestureDetector (which gives us an onTap callback) in addition to visual input.

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:

It looks much better now and it’s tappable. Obviously, there are a lot more use situations where you would utilize the Row gadget, however the standard stays something similar.

Alignment properties in Row and Column

Line and Column have similar arrangement properties, they work for the mainAxisAlignment (level in Row and vertical in Column) and crossAxisAlignment (something contrary to mainAxis). For instance, in the event that I need to characterize that youngster gadgets ought to be adjusted vertically inside the Row gadget, I would need to utilize the crossAxisAlignment, as I’m characterizing the arrangement the other way. These 2 arrangement classes can be set to one of the accompanying qualities:

  • start
  • focus
  • end
  • spaceAround: Place the free space uniformly between the youngsters just as half of that space when the first and last kid.
  • spaceBetween: Place the free space equitably between the youngsters.
  • spaceEvenly: Place the free space equitably between the kids just as when the first and last youngster.

Suppose we choose to utilize spaceBetween to adjust our symbol and text in the past model. It will at that point resemble this:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: InkWell(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            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
        },
      ),
    );
  }

Which will look like this:

You can attempt different properties yourself to perceive what occurs (on the off chance that you are a web designer, it works equivalent to flex properties.

Use case: How to create a login form using Column in Flutter

An awesome illustration of when Column proves to be useful is likely arrangement of structure gadgets in a page. That is on the grounds that we need to adjust the gadgets vertically otherwise known as in a Column.

How about we make a login structure containing a username and a secret phrase field. I’m not diving excessively deep into details, as I’m zeroing in on arrangement for the present. I will compose a different post about how to appropriately utilize a structure in Flutter.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                hintText: "Your email address",
              ),
            ),
            SizedBox(
              height: 32,
            ),
            TextField(
              keyboardType: TextInputType.text,
              obscureText: true, // because it's a password
              decoration: InputDecoration(
                hintText: "Your password",
              ),
            ),
            SizedBox(
              height: 32,
            ),
            RaisedButton(
              child: Text("Login"),
              color: Colors.blue,
              textColor: Colors.white,
              onPressed: () {
                // perform login
              },
            ),
          ],
        ),
      ),
    );
  }

This will look like this:

This post clarifies the essential working of Row and Column which adjust their kids in an even and vertical manner. There are further developed arrangements inside Row and Column, similar to how much every kid ought to possess, which I will clarify in a different post.

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