How To Use Row And Column With Example Using Flutter

admin_img Posted By Bajarangi soft , Posted On 22-09-2020

Row and Column might be the most important (multi-child) layout widgets in Flutter. Row and Column let you align child widgets horizontally and Vertically .

How to use Row and Column  in Flutter with examples

Let’s say we want to show a list of contacts like we have in WhatsApp and we want to define how each of these list items will look like. Let’s say we have the following 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

Flutter provides us with a very nice widget called CircleAvatar that gives you a ready-to-use circular widget specially made for this purpose.So we will use that one. We define a background color for our avatar and take the first letter of our contact instead of an image. For the name of our contact, we will be using the Text widget obviously.

Row WIdget Aligment code:
Column(
  children: <Widget>[
    Container(
      padding: EdgeInsets.all(10.0),
      child:Row(
    children: <Widget>[
      CircleAvatar(
        backgroundColor: Colors.black,
        child: Text(
          'B',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      SizedBox(width: 20,),
      Text('Bajarangisoft'),
    ],
  ),
),
Container(
  padding: EdgeInsets.all(10.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      CircleAvatar(
        backgroundColor: Colors.black,
        child: Text(
          'B',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      SizedBox(width: 20,),
      Text('Bajarangisoft'),
    ],
  ),
 ),
 ],
)


Complete Code for ROW and COLUMN Widget Aligment
Main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'App Design',
      theme: ThemeData(
        backgroundColor: Colors.black,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    String message = "";

    return Scaffold(
      appBar: AppBar(
        title: Text("Widget Alignment Using Row"),
        backgroundColor: Colors.black,
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(10.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundColor: Colors.black,
                  child: Text(
                    'B',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(width: 20,),
                Text('Bajarangisoft'),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                CircleAvatar(
                  backgroundColor: Colors.black,
                  child: Text(
                    'B',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(width: 20,),
                Text('Bajarangisoft'),
              ],
            ),
          ),
        ],
      )
    );
  }
}

Related Post