Flutter/기본 위젯

Flutter - Expanded 위젯

wdadaww 2023. 3. 4. 02:31

Expanded

Row나 Column 위젯을 사용하다보면 Expanded라는 요소를 써야할때가잇다고한다.

-자식 위젯의 크기를 최대한으로 확장시켜주는 위젯.

-flex 프로퍼티의 값으로 비율을 설정

-기본값은 1

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(
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        home: Scaffold(
            appBar: AppBar(
              // Here we take the value from the MyHomePage object that was created by
              // the App.build method, and use it to set our appbar title.
              title: const Text("제목"),
            ),
            body: Center(
            child: Row(
              children:[
                Expanded(
                    flex: 3,
                    child: Container(
                      height: 100,
                      width: 100,
                      color: Colors.lightBlue,
                      child: const Text("Flutter"),
                    )),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100,
                    width: 100,
                    color: Colors.deepOrange,
                    child: const Text("Flutter"),
                  ),
                ),
                Expanded(
                    flex: 5,

                    child: Container(
                      height: 100,
                      width: 100,
                      color: Colors.indigo,
                      child: const Text("Flutter"),
                    ))
            ],
        )),));
  }
}