Expanded Satırı Doldurur

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

Bir Row, her alt öğeye istediği genişliği verir. Genişliği olmayan bir kutu yalnızca metni kadar geniştir, bu nedenle satırın geri kalanı boş kalır.

Bir alt öğeyi Expanded içine sarın; böylece diğer alt öğelerin bıraktığı tüm alanı kaplar:

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

390 piksel genişliğinde bir telefonda kırmızı kutu 100 pikselini korur ve mavi kutu kalan 290 pikseli alır. Daha geniş bir ekranda mavi kutu büyür; kırmızı kutu 100 piksel kalır.

Expanded, geriye kalan yüksekliği doldurduğu bir Column içinde de çalışır.

Görev

Kolay

Arama çubuğu çok kısa. Search kutusunun satırın geri kalanını doldurmasını sağlayarak, 80 piksellik Menu kutusunun yanında 310 piksel genişliğinde olmasını sağla.

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('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}