Expanded

화면의 양단을 메우도록(듯이) 퍼지거나 펼쳐 주는 Expanded.
다만, Expanded는 Row/Column/Flex의 아이 이외로 사용하면 안된다.

등장 인물 일람

사람이라든지 위젯 ...

Column 수직으로 위젯을 정렬
Row 옆에 위젯을 나란히 준다
ListView 위젯을 목록으로 정렬
Container 사각형 그리기
Text 문자 그리기
Divider 구분선 그리기
SizedBox 여백 그리기

이벤트: 사라진 위젯

ListView 안에서 Expanded를 사용했는데, 에뮬레이터에서는 움직였지만, 실제 기기에서는 표시되지 않았다.

코드:

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class Rect {
  Rect({this.title, this.color});
  String title;
  Color color;
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final List<Rect> myList = [
    Rect(title: "ウサギ", color: Colors.pink),
    Rect(title: "コアラ", color: Colors.grey),
    Rect(title: "パンダ", color: Colors.white),
    Rect(title: "ひよこ", color: Colors.yellow),
    Rect(title: "あざらし", color: Colors.green),
    Rect(title: "しまうま", color: Colors.pink),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("RowとListView"),
        ),
        body: Column(
          children: [
            Text('Expandedを使わないRow(Row->Container)'),
            Row(
              children: myList.map((obj) {
                debugPrint(obj.title);
                return Container(color: obj.color, child: Text(obj.title));
              }).toList(),
            ),
            Text('→画面の隙間を埋めたい'),
            SizedBox(height: 10),
            Divider(),
            Text('ExpandedのRowの使い方 (Row -> Expanded -> Container)'),
            Row(
              children: myList.map((obj) {
                return Expanded(
                    child: Container(color: obj.color, child: Text(obj.title)));
              }).toList(),
            ),
            Text('→Expandedを使うと画面の両端目一杯領域をとってくれる'),
            SizedBox(height: 10),
            Divider(),
            Text('参考：Expandedを使わないListView (ListView -> Container)'),
            Container(
              height: 20,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: myList.map((obj) {
                  return Container(color: obj.color, child: Text(obj.title));
                }).toList(),
              ),
            ),
            Text('→隙間が気になったとする'),
            SizedBox(height: 10),
            Divider(),
            Text('ListViewにExpandedを当てる (ListView -> Expanded -> Container)'),
            Container(
              height: 20,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: myList.map((obj) {
                  return Expanded(
                      child:
                          Container(color: obj.color, child: Text(obj.title)));
                }).toList(),
              ),
            ),
            Text('→広がらないし、実機で動かしたら消えてしまう'),
            SizedBox(height: 10),
            Divider(),
          ],
        ),
      ),
    );
  }
}

이미지(에뮬레이터)


이미지(실기)


Expanded를 적용 ListView 사라졌다! !

잘 보면 디버그 콘솔에 경고문이 나온다.

════════ Exception caught by widgets library ═══════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════

원래...

Expanded는 Row 혹은 Column, flex의 직하에서 실행하는 것.

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

child가 사용 가능한 공간을 채우기 위해 Row, Column 또는 Flex의 자식을 확장하는 위젯.
htps : // 아피. fぅ r. 로 v/fぅ는 r/우우 드게 ts/에 x 판데 dcぁ s. HTML

결론

단시간에 시행 착오하고 있다면 실망해 버리거나 하지만,
Expanded하고 싶을 때, 부모는 Column/Row/Flex로 해 사용해 주세요.
잘못해도 ListView 안에서 사용하지 말라.