Layout Widgets in FLutter

Zia

2 Followers

Aug 21, 2024

11 min read

331

In Flutter, a widget may contain one or more widgets. Flutter comes up with a huge number of widgets along with layout features to merge multiple into a single one. For example, the center widget helps to bring the child widget to the center. Some of the widgets that work with layout widgets are as follows:

Container
Column
Row
Stack
Center

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: Text('Layout Widgets Example')),

body: Column(

children: [

// Container Example

Container(

color: Colors.teal,

padding: EdgeInsets.all(20.0),

child: Text(

'This is a Container',

style: TextStyle(color: Colors.white),

SizedBox(height: 50),

// Row Example

Row(

children: [

Icon(Icons.star, color: Colors.teal),

SizedBox(width: 20),

Text('This is a Row'),

SizedBox(width: 20),

Icon(Icons.start, color: Colors.teal),

SizedBox(height: 50),

// Column Example

Column(

children: [

Text('This is First Column.'),

Text('This is second Column.'),

Text('This is third Column.'),

SizedBox(height: 50),

// Stack Example

Stack(

children: [

Container(

color: Colors.teal,

width: 150,

height: 150,

Positioned(

top: 10,

left: 10,

child: Icon(Icons.star, color: Colors.white, size: 50),

SizedBox(height: 50),

// Center Example

Center(

child: Text('This is Centered'),

);

}

Layout Widgets in Flutter (Container, Row, Column, Stack, Center) - Flutter Tutorial

Flutter Widgets Layout Widgets Layout widgets in flutter flutter container flutter row flutter column flutter stack flutter center

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.