Flutter Tutorial

How to use Row widget in Flutter

Column

Code

import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'E-Commerce App',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget{
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.withOpacity(0.5),

      ///////////////////////AppBar ////////////////////////////////
      appBar: AppBar(
        backgroundColor: Colors.deepOrange,
        title: const Text('Home Screen', style: TextStyle(color: Colors.white),),
        leading: const Icon(Icons.home, color: Colors.white,),
        actions: [
          IconButton(onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                backgroundColor: Colors.deepOrange,
                duration: Duration(milliseconds: 500),
                content: Text('Al Saad Bi Honey'),
              ),
            );
            }, icon: const Icon(Icons.notification_add, color: Colors.white,)
          ),
          IconButton.outlined(onPressed: (){
            showDialog(context: context, builder: (context){
              return const AlertDialog(
                title: Text('Honey'),
                content: Text('Al Saad Bin Rahaman'),
              );
            });
          }, icon: const Icon(Icons.ac_unit_rounded, color: Colors.white,)),
        ],
      ),
      ///////////////////////End AppBar ////////////////////////////////

      body: const Center(
        ///////////////////////Column ////////////////////////////////
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Honey', style: TextStyle(color: Colors.deepOrange, fontSize: 30, fontWeight: FontWeight.bold),),
            Text('Al Saad'),
            Text('Al Saad'),
            Text('Al Saad'),
            Text('Al Saad'),
            ///////////////////////Row ////////////////////////////////
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text('Honey', style: TextStyle(color: Colors.deepOrange, fontSize: 30, fontWeight: FontWeight.bold),),
                Text('Al Saad'),
                Text('Al Saad'),
                Text('Al Saad'),
                Column(
                  children: [
                    Text('Al Saad'),
                    Text('Al Saad'),
                  ],
                )
              ],
            )
            ///////////////////////End Row////////////////////////////////
          ],
        ),
        ///////////////////////End Column ////////////////////////////////
      ),
    );
  }
}

Output

appbar
Scroll to Top