Flutter Widgets and Layouts

Layout Widgets

// Column — vertical arrangement
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('First'),
    Text('Second'),
    Text('Third'),
  ],
)

// Row — horizontal arrangement
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.home),
    Text('Home'),
    Icon(Icons.arrow_forward),
  ],
)

// Stack — overlapping widgets
Stack(
  children: [
    Image.network('https://example.com/image.jpg'),
    Positioned(
      bottom: 8, right: 8,
      child: Text('Caption', style: TextStyle(color: Colors.white)),
    ),
  ],
)

// Container — box model
Container(
  width: 200,
  height: 100,
  margin: EdgeInsets.all(8),
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [BoxShadow(blurRadius: 4, color: Colors.black26)],
  ),
  child: Text('Styled Box', style: TextStyle(color: Colors.white)),
)

Display Widgets

// Text with styling
Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.2,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

// Image
Image.network('https://flutter.dev/images/flutter-logo-sharing.png',
    width: 100, height: 100, fit: BoxFit.contain)

// Icon
Icon(Icons.favorite, color: Colors.red, size: 32)

// ListView
ListView.builder(
  itemCount: items.length,
  itemBuilder: (ctx, i) => ListTile(
    leading: Icon(Icons.check_circle),
    title: Text(items[i]),
    trailing: Icon(Icons.arrow_forward_ios),
  ),
)

Input Widgets

// Button variants
ElevatedButton(onPressed: () {}, child: Text('Elevated'))
OutlinedButton(onPressed: () {}, child: Text('Outlined'))
TextButton(onPressed: () {}, child: Text('Text'))
IconButton(icon: Icon(Icons.add), onPressed: () {})
FloatingActionButton(onPressed: () {}, child: Icon(Icons.add))

// TextField
TextField(
  controller: TextEditingController(),
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (value) => print('Typing: $value'),
)

StatefulWidget Example

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() => setState(() => _count++);
  void _decrement() => setState(() => _count--);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_count', style: Theme.of(context).textTheme.displayLarge),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(onPressed: _decrement, child: Icon(Icons.remove)),
                SizedBox(width: 20),
                FloatingActionButton(onPressed: _increment, child: Icon(Icons.add)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

🧠 Quiz

Summary

Flutter's layout system uses Column, Row, Stack, and Container for positioning. Display content with Text, Image, Icon, and ListView. Accept input with TextField, ElevatedButton, and form widgets. Use StatefulWidget with setState() to respond to user interaction. Everything composes — widgets nest inside widgets.