[flutter] 플러터 금주의 위젯 #02 expanded
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 에서 좀더 유연한 공간 활용을 할 수 있습니다.
- 다음 시간에 또 만나요 ~
@tipu curate