Hari 17: Layout — Row, Column, Stack

Row & Column

Row dan Column adalah widget layout paling fundamental di Flutter.

import "package:flutter/material.dart";

void main() => runApp(MaterialApp(home: Scaffold(
  body: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("Nama", style: TextStyle(fontWeight: FontWeight.bold)),
            Text("Budi Santoso"),
          ],
        ),
        Divider(),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("Saldo"),
            Text("Rp 1.500.000", style: TextStyle(color: Colors.green)),
          ],
        ),
      ],
    ),
  ),
)));

Expanded & Flexible

Row(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.blue, height: 50)),
    Expanded(flex: 1, child: Container(color: Colors.red, height: 50)),
    Expanded(flex: 1, child: Container(color: Colors.green, height: 50)),
  ],
)

Stack & Positioned

Stack(
  children: [
    Image.network("https://example.com/bg.jpg", fit: BoxFit.cover),
    Positioned(
      bottom: 16,
      left: 16,
      child: Text("Overlay Text", style: TextStyle(color: Colors.white, fontSize: 24)),
    ),
    Positioned(
      top: 8,
      right: 8,
      child: IconButton(icon: Icon(Icons.favorite, color: Colors.red), onPressed: () {}),
    ),
  ],
)