반응형

오늘은 Stack 위젯 사용법을 알아보겠다.
Stack 사용 이유
기본적으로 Flutter의 위젯들은 한층 한층 쌓이는 형태이다.


그러면 위젯들을 겹치고 싶으면 어떻게 할까?
그때 Stack 위젯을 사용하면 된다.
Stack 사용법
위에 코드에서 column을 stack으로 바꿔보자


그러면 Container 위젯들이 이렇게 겹쳐지게 된다.
여기서 알 수 있는것은 코드 순서대로 위젯이 쌓인다는 것이다.
Positioned
Stack에서 위젯들의 위치를 설정할 때는 positioned를 사용한다.
positioned 사용법은 위치를 설정하고 싶은 위젯에 positioned 위젯을 감싸면 된다.
positioned을 상, 하, 좌, 우, 높이, 너비를 설정할 수 있는데,
높이, 너비는 여러분이 생각하는 높이, 너비 맞고
상, 하, 좌, 우 값은 떨어뜨릴 길이를 설정하는것이다.
말로 설명이 어려워 보여주면
widget 3을 Positioned로 감싼 후 left 값을 170으로 설정해 보겠다.


widget 3가 좌측에서 170 떨어진 것을 확인할 수 있다.
전체 코드
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Stack test'),
),
body: Center(
child: Stack(
children: [
Container(
alignment: Alignment.bottomCenter,
height: 300,
width: 350,
color: const Color.fromARGB(255, 218, 255, 149),
child: const Text(
'Widget 1',
style: TextStyle(fontSize: 33),
),
),
Container(
alignment: Alignment.bottomCenter,
height: 250,
width: 250,
color: const Color.fromARGB(255, 197, 186, 255),
child: const Text(
'Widget 2',
style: TextStyle(fontSize: 33),
),
),
Positioned(
left: 170,
child: Container(
alignment: Alignment.bottomCenter,
height: 200,
width: 150,
color: const Color.fromARGB(255, 175, 244, 197),
child: const Text(
'Widget 3',
style: TextStyle(fontSize: 33),
),
),
)
],
),
),
),
);
}
반응형
'APP > Flutter' 카테고리의 다른 글
플러터 [Flutter] 플랫폼(Platform) 분기처리 방법 (0) | 2023.08.04 |
---|---|
플러터 [Flutter] 초간단 splash 화면 설정 (0) | 2023.07.25 |
플러터[Flutter] 네이버지도[Navermap] 마커 생성 & 위젯 사용(2023ver) (2) | 2023.05.17 |
플러터[Flutter] 네이버지도[Navermap] 생성 (2023ver) (2) | 2023.05.14 |
플러터 [Flutter] 구글맵 [Googlemap] - json 데이터로 마커 생성(2023ver) (4) | 2023.05.11 |