flex ile Alanı Paylaşmak

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 2 / 30.

Row öğesinin iki çocuğu da Expanded olduğunda, alanı eşit paylaşırlar: 390 piksel genişliğindeki bir telefonda her birine 195 piksel düşer.

Alanı eşit olmayan şekilde paylaşmak için Expanded öğesine bir flex: ver. Bu bir boyut değil, paydır. Flutter payları toplar ve alanı bu paylara göre böler:

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

Payların toplamı 4 eder; bu nedenle kırmızı, satırın dörtte üçünü, mavi ise dörtte birini alır. flex: değeri olmayan bir çocuğun payı 1'dir.

Paylar bütünün parçaları olduğundan, düzen her ekran genişliğinde oranlarını korur.

Görev

Kolay

Chart kutusunu Notes kutusunun iki katı genişliğinde yap. Telefonda bu, 260 ve 130 pikseldir.

Kendin dene

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}