Flutter
[Flutter] 25. Stack, Positioned, Align, Expanded 위젯
Song hyun
2024. 11. 6. 11:39
728x90
반응형
[Flutter] 25. Stack, Positioned, Align, Expanded 위젯
1. Stack 위젯
- Row 위젯은 내부 위젯을 수평으로 나열하는 위젯이다.
- Column 위젯은 내부 위젯을 수직으로 나열하는 위젯이다.
- Stack위젯은 내부 위젯을 겹쳐서 나열하는 위젯이다.
2. Positioned 위젯과 Align 위젯
- 자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯이다.
- 특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만, Positioned 위젯은 Stack 위젯 내부에서만 사용할 수 있지만 Align위젯은 개별적으로도 사용 가능하다.
- Align 위젯에서 자식 위젯의 위치는 alignment 속성으로 설정할 수 있다.
3. Expanded 위젯
- 위젯 크기를 수치로 설정하지 않고, 비율로 설정할 때 사용하는 위젯
- 화면 사이즈가 다양하기 때문에, 수치로 위젯 크기를 설정할 수 있을 경우 여러 화면 사이즈 대응이 어려울 수 있다.
- 따라서, 비율로 위젯 크기를 설정하는 방법에 대해 알아둘 필요가 있다.
- Expanded 위젯의 flex 속성은 각 자식 위젯이 다른 자식 위젯과 비교해ㅡ 차지해야 하는 공간의 양을 지정하는 데 사용된다.
*시나리오 코드
(1) 시나리오 코드1
*자식 위젯이 생기면 위젯의 크기가 작아진다.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp7());
}
class MyApp7 extends StatelessWidget {
const MyApp7({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
color:Colors.deepPurpleAccent,
child: Text('반가워')
)
),
);
}
}
(2) 시나리오 코드2 - Stack 위젯
import 'package:flutter/material.dart';
void main(){
runApp(MyApp7());
}
class MyApp7 extends StatelessWidget {
const MyApp7({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children: [
Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.pinkAccent
)
),
Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.blueAccent
)
),
Container(
width: 500,
height: 500,
decoration: BoxDecoration(
color: Colors.yellow
)
),
]
)
),
);
}
}
(3) 시나리오 코드3 - Positioned 위젯
** Stack 위젯 내부에서 Positioned 위젯을 사용할 수 있다.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp7());
}
class MyApp7 extends StatelessWidget {
const MyApp7({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children: [
Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.pinkAccent
)
),
Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.blueAccent
)
),
Positioned(
top: 30,
left: 50,
bottom: 5,
child: Container(
width: 500,
height: 500,
decoration: BoxDecoration(
color: Colors.yellow
))
),
]
)
),
);
}
}
(4) 시나리오 코드4 - Aligned와 Positioned 위젯
*Aligned 위젯: 특정 위치에 위젯을 배치하기 위한 것.
-Positioned: Stack 위젯 내부에서만 사용 가능
-Aligned: 독립적으로도 사용 가능
import 'package:flutter/material.dart';
void main() {
runApp(MyApp8());
}
class MyApp8 extends StatelessWidget {
const MyApp8({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
'Align Widget Example',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
body: Center(
child: Container(
// color: Colors.blue, 주의 !
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
),
child: Align(
//alignment: Alignment.bottomCenter ,
alignment: Alignment(0.5,0.5),
child: Text('Hello World'),
),
),
),
),
);
}
}
(5) 시나리오 코드5 - Expanded 위젯
*Expanded 위젯
-Center 위젯은 해당 위젯의 크기만큼 (꽉 채울 만큼) 늘어남
import 'package:flutter/material.dart';
void main() {
runApp(MyApp9());
}
class MyApp9 extends StatelessWidget {
const MyApp9({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(
'Expanded Widget Example',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
body: SizedBox(
width: double.infinity,
child: Column(
children: [
Expanded(
flex:2,
child: Container(
color: Colors.red,
child: Center(child: Text("First Item"))
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.orange,
child: Center(child: Text("Second Item"))
),
),
],
)
),
),
);
}
}
728x90
반응형