반응형
[분류 전체보기] - 플러터 공부 Day7: StatefulWidget
플러터 공부 Day7: StatefulWidget
[분류 전체보기] - 플러터 공부 Day6: UI 플러터 공부 Day6: UI [분류 전체보기] - 플러터 공부 Day5: Hello Flutter 플러터 공부 Day5: Hello Flutter [분류 전체보기] - 플러터 공부 Day4: asynchronous programming 플러터
jastory.tistory.com
반응형
Flexible
- child Widget을 픽셀값으로 맞추지 않고 화면 비율로 맞춘다.
- flex를 사용해 비율을 맞춰줄 수 있다. ex)
Flexible(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: Colors.red,
),
),
),
Flexible(
flex: 2,
child: Container(
decoration: const BoxDecoration(
color: Colors.blue,
),
),
),
Flexible(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: Colors.green,
),
),
),
3개의 Container들의 flex 비율은 1:2:1 이다.
Container
- 이렇게 Container Widget의 flex를 변경해주면 child Widget과 Container Widget은 padding이 입혀진 것 처럼 되는데 여기서 alignment parameter를 사용해 child Widget의 위치를 변경해 줄 수 있다. ex)
alignment: Alignment.center,
Expanded
- Expanded Widget을 사용하면 공간을 최대한 활용할 수 있다.ex)
Flexible(
flex: 1,
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(color: Theme.of(context).cardColor),
child: Column(
children: const [
Text('hi'),
Text('hello'),
],
),
),
),
],
),
),
GestureDetector
- Widget을 버튼으로 만들어 준다.
반응형
댓글