전체코드
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Sample createState() => Sample();
}
class Sample extends State<MyHomePage>{
@override
Widget build(BuildContext context){
double appBarHeight = 50.0;
return MaterialApp(
home: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(appBarHeight),
child:AppBar(
title: Text('ExpandedStack Demo'),
backgroundColor: Colors.cyan,
),
),
body: Container(
child: Column(
children: <Widget>[
Expanded(flex: 2,
child: Row(children: <Widget>[
Expanded(flex: 1, child: Red()),
Expanded(flex: 2, child: Green()),
Expanded(flex: 3, child: Blue()),
]),
),
Expanded(flex: 1,
child: Row(children: <Widget>[
Expanded(flex: 3, child: Green()),
Expanded(flex: 2, child: Blue()),
Expanded(flex: 1, child: Red()),
]),
),
Expanded(flex: 2,
child: Row(children: <Widget>[
Expanded(flex: 1, child: Blue()),
Expanded(flex: 2,
child: Stack(
children: <Widget>[
Red(),
Center(child: Container(child: Card(color: Colors.yellow), width: 100, height: 100,))]
)
),
Expanded(flex: 1, child: Green()),
]),
),
]
),
),
),
);
}
}
// Card 위젯 구현
class Red extends StatelessWidget {
@override
Widget build(BuildContext context){
return new LayoutBuilder(builder: (context, constraint) {
double min = (constraint.biggest.width < constraint.biggest.height)
? constraint.biggest.width : constraint.biggest.height;
return Container(
width: constraint.biggest.width,
height: constraint.biggest.height,
child: Card(color: Colors.red)
);
});
}
}
// Text 위젯 구현
class Green extends StatelessWidget {
@override
Widget build(BuildContext context){
return new LayoutBuilder(builder: (context, constraint) {
double min = (constraint.biggest.width < constraint.biggest.height)
? constraint.biggest.width : constraint.biggest.height;
return Container(
width: constraint.biggest.width,
height: constraint.biggest.height,
color: Colors.green,
child: Center(
child: Text('GREEN',
style: TextStyle(fontSize: min / 4, color: Colors.white, decoration: TextDecoration.none, fontWeight: FontWeight.normal)
)
)
);
});
}
}
// Icon 위젯 구현
class Blue extends StatelessWidget {
@override
Widget build(BuildContext context){
return new LayoutBuilder(builder: (context, constraint) {
double min = (constraint.biggest.width < constraint.biggest.height)
? constraint.biggest.width : constraint.biggest.height;
return Container(
width: constraint.biggest.width,
height: constraint.biggest.height,
color: Colors.blue,
child: Icon(Icons.access_alarms, size: min / 2, color: Colors.white),
);
});
}
}
Red, Green, Blue 에 대한 설명은 https://cdl-dev.tistory.com/10 참조
Sample
class Sample extends State<MyHomePage>{
...
body: Container(
child: Column(
children: <Widget>[
Expanded(flex: 2,
child: Row(children: <Widget>[
Expanded(flex: 1, child: Red()),
Expanded(flex: 2, child: Green()),
Expanded(flex: 3, child: Blue()),
]),
),
Expanded(flex: 1,
child: Row(children: <Widget>[
Expanded(flex: 3, child: Green()),
Expanded(flex: 2, child: Blue()),
Expanded(flex: 1, child: Red()),
]),
),
Expanded(flex: 2,
child: Row(children: <Widget>[
Expanded(flex: 1, child: Blue()),
Expanded(flex: 2,
child: Stack(
children: <Widget>[
Red(),
Center(child: Container(child: Card(color: Colors.yellow), width: 100, height: 100,))]
)
),
Expanded(flex: 1, child: Green()),
]),
),
]
),
),
...
}
- Expanded
Expanded 는 보통 Column, Row Widget 과 많이 쓰인다. Column 과 Row Widget 은 children 에 할당되는 Widget 들의 크기에 따라 자동으로 공간을 할당한다.(크기가 지정되지 않은경우 동일한 크기로 자동 할당) 이때 각 Widget의 부모에 Expanded Widget을 사용하고 "flex:" 에 값을 할당하면 할당된 flex 에 따라 비율을 조정한다. 위에서는 Column을 (2 : 1 : 2) 의 크기비율로 나누고 각 Row를 (1 : 2 : 3), (3 : 2 : 1), (1 : 2 : 2) 의 크기비율로 나누었다.
- Stack
Stack은 children 에 할당되는 Widget 들을 순서에 따라 덮어쓰고 출력한다. 위에서는 Red()를 먼저 출력하고 Center에 (100,100) Size를 갖는 노란색의 Card를 덮어쓰고 출력한다.
'Flutter' 카테고리의 다른 글
(비공개_cdlpw) Flutter 응용 (0) | 2020.07.27 |
---|---|
Flutter 해상도별 Image (0) | 2020.07.24 |
Flutter Hero (0) | 2020.07.24 |
Flutter TabBar (0) | 2020.07.21 |
Flutter Swiper (0) | 2020.07.21 |