[flutter] 플러터 금주의 위젯 #02 expanded

in #sct4 years ago (edited)

EXPANDED (확장)

자식(Child)이 사용 가능한 공간을 채우도록 행(Row), 열(Column) 또는 유연한영역(Flex)의 자식을 확장하는 위젯.

flutter docs

https://api.flutter.dev/flutter/widgets/Expanded-class.html

youtube

EXAMPLE(예제)

EXPANDED 적용 EXPANDED 미적용
import 'package:flutter/material.dart';

/// 확장영역 예제
/// 
class ExExpanded extends StatelessWidget {
  
  /// 기본 생성자 
  const ExExpanded({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// 컨테이너 생성 후 Row 영역에 값을 넣어 변화를 확인
    return Container(
      child: Row(
        children: <Widget>[
          /// Expanded 지정 시 남은 공간을 자동으로 채워준다
          BoxWidget(color:Colors.blueGrey, child: Text('왼쪽')),
          Expanded(child: BoxWidget(color:Colors.pink[100], child: Text('중간'))),
          // BoxWidget(color:Colors.pink[100], child: Text('중간')),
          BoxWidget(color:Colors.blueGrey, child: Text('오른쪽')),
        ],
      ),
    );
  }
}

/// 테스트용 박스 위젯
/// 
/// 기본적으로 50x20 크기의 `Container`에 테두리 영역을 그려 표시해주도록 한다
class BoxWidget extends StatelessWidget {
  const BoxWidget({Key key,double width, double height, Color color, double borderWidth, Color borderColor,Widget child}) : 
    _width=width ?? 50.0,
    _height=height ?? 20.0,
    _color=color ?? const Color(0xff7c94b6),
    _borderWidth=borderWidth ?? 1.0,
    _borderColor=borderColor ?? Colors.transparent,
    _child=child,
    super(key: key);

  final _width;
  final _height;
  final _color;
  final _borderWidth;
  final _borderColor;
  final _child;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _width,
      height: _height,
      decoration: BoxDecoration(
        color: _color,
        border: Border.all(
          color: _borderColor,
          width: _borderWidth,
        ),
      ),
      child : _child
    );
  }
}

맺음말

  • EXPANED를 통해 기본적인 레이아웃인 ROW, COLUMN 에서 좀더 유연한 공간 활용을 할 수 있습니다.
  • 다음 시간에 또 만나요 ~

관련 글

  • 플러터 금주의 위젯 : 1
  • 플러터 라이브러리 투어 : 1 / 2 / 3 / 4 / 5 / 6
  • 다트언어 투어 : 1 / 2 / 3 / 4
  • 플러터 설치 - MAC / Windows

Coin Marketplace

STEEM 0.29
TRX 0.12
JST 0.036
BTC 65930.92
ETH 3387.67
USDT 1.00
SBD 4.75