์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- arkit
- BOJ
- ํ๋ก๊ทธ๋๋จธ์ค
- ios
- realm
- reactorkit
- Lv2
- rxcocoa
- raywenderlich
- designpattern
- UIKit
- swift
- ๋ฐฑ์ค
- TCA
- SnapKit
- tableView
- Kuring
- Xcode
- ํจ์คํธ์บ ํผ์ค
- BFS
- RxSwift
- node.js
- MVVM
- combine
- XCTest
- visionOS
- Flutter
- Swfit
- SwiftUI
- CollectionView
- Today
- Total
lgvv98
[flutter] 18(26)๊ฐ | ํ๋ฌํฐ 2.0 SnackBar ์ ScaffoldMessenger ๋ณธ๋ฌธ
[flutter] 18(26)๊ฐ | ํ๋ฌํฐ 2.0 SnackBar ์ ScaffoldMessenger
๐ฅ ์บ๋ฟ๋งจ 2021. 8. 12. 02:56โ ์ด๋ฒ ์๊ฐ์๋ ํ๋ฌํฐ 2.0์ผ๋ก ์ธํด์ SnackBar์ ์ฌ์ฉ์ด ์์ ํ ๋ฌ๋ผ์ก์ด.
๊ทธ๋์ 18๊ฐ์ด ์๋์ 26๊ฐ์ผ๋ก ํจ์น๊ฐ์ข๋ฅผ ์งํํ๋๋ฐ ์ฌ๊ธฐ๋ก ๋ณด๊ธฐ!
ํน์๋ผ๋ ๊ฐ์๋ฅผ ๋ณด๊ณ ๋ฐ๋ผํ๋ ์ฌ๋์ด๋ผ๋ฉด ์ด ์์ ์์ ํจ์น๊ฐ์ข์ชฝ์ผ๋ก ๊ฑด๋ ๋ฐ๋๊ฒ์ ์ถ์ฒํด.
๋ํ ์ด๋ฒ ๊ฐ์๋ ์๋นํ ๋ณต์กํ ๊ฐ๋ ๋ค๊ณผ ์ฑ ๊ฐ๋ฐ์ ์์ด์ ์๋นํ ์ค์ํ ๊ฒ๋ค์ด ๋ง์ผ๋ฏ๋ก ์ง์ค ๊ทธ๋ฆฌ๊ณ ๋ ์ง์คํ ๊ฒ!
๊ทธ๋ฆฌ๊ณ ํ๋ฌํฐ ํ๋ฉด์ ํ์ ๋ํ ๊ฐ๋จํ ์ฝ๋๋ค์ ์ฟ๋ณผ ์ ์๋ค.
๐ ์ด๋ฒ ํฌ์คํ ์ ๊ธธ์ด์ ๋ค์ ํฌ์คํ ๊น์ง ์ด์ด์ง๋๋ค...~~
1. ScaffoldMessenger class
2. Buttons(TextButton, ElevatedButton, OutlinedButton)
3. Global Key
โ Why ScaffoldMessger?
์ฐ์ Scaffold.of(context)๋ฅผ ์ดํด๋ณด์
๊ธฐ๋ณธ์ ์ผ๋ก Scaffold.of(context)์ ๊ฒฝ์ฐ์๋ ์๋ก ์ฌ๋ผ๊ฐ๋ฉด์ ๊ฐ์ฅ ๊ฐ๊น์ด Scaffold๋ฅผ ์ฐพ์ ๋ฐํํ๋ผ๋ ์๋ฏธ์๋ค.
๊ทธ.๋ฐ.๋ฐ ์ด ๊ณผ์ ์์ Scaffold.of ๋ฉ์๋๊ฐ ๊ฐ์ง๊ณ ์๋ ํ์ฌ์ ์ปจํ ์คํธ๋ก๋ Scaffold๋ฅผ ์ฐพ์ ์ ์์๋ค.
์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ Builder์์ ฏ์ ์์ฑํด์ ์๋ก์ด context๋ฅผ Scffold.of ๋ฉ์๋๊ฐ ์ ๋ฌ๋ฐ๊ฒ ํ ํ ๊ทธ ์์น์์ ๋ถํฐ ์์ ฏ ํธ๋ฆฌ ์์ Builder ์์ ์์นํ๊ณ ์๋ Scaffold ์์ ฏ์ ์ฐพ์๋์๋ ๋ฐฉ์์ผ๋ก ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์๋ค.
์๋์ ๊ทธ๋ฆผ์ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ์์ ๋ํ ์์ ๊ธ์ ๋ํ ์ค๋ช ์ด๋ค.
๊ทธ๋ผ ๊ธฐ์กด์ ์ค๋ต๋ฐ๋ ์ด๋ค ๋ฌธ์ ๋ฅผ ๊ฐ์ก์๊น?
๋ฐ๋ก ํ์ฌ context๋ ํ์ฌ์ ์์น๋ฅผ ์ฐธ์กฐํ๊ณ ์๊ธฐ์ ํ๋ฉด์ ๋ฐ๊พธ๊ฒ ๋๋ฉด ์๋ก์ด context๊ฐ ์๊ฒจ์ ๊ธฐ์กด SnackBar๊ฐ context๋ฅผ ์ฐพ์ง ๋ชปํด ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
๊ทธ๋ผ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น???
ScaffoldMessenger๋ฅผ ์ต์๋จ์ ๋๊ณ ๊ฐ๊ฐ์ SnackBar์์ ์์ Scaffold๋ค์ ์ฐธ์กฐํ๊ฒ ํ๋ค.
โ ์ฝ๋๋ฆฌ๋ทฐ ๋ฐ ์ฝ๋์ ์ดํด
import 'package:flutter/material.dart'; // ๋ฐ์คํฌํ, ์ฑ ๋ฑ์ ๊ณ ๋ฃจ UI๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ๊ตฌ๊ธ์ด ์ ๊ณตํด์ฃผ๋ ํจํค
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// ์ค์ง์ ์ผ๋ก ๋ชจ๋ ์ฑ์ ๊ฐ์ธ๊ณ ์๋ค.
title: 'Appbar', // ์ฑ์ ์ด์นญํ๋ ์ด๋ฆ -> ์ค๋งํธ ํฐ ์ฑ์์ ์ต๊ทผ ์ฌ์ฉํ ์ฑ ๋ณด์ฌ์ค ๋์ ์ด๋ฆ
theme: ThemeData(primarySwatch: Colors.red // ํน์ ์์ ์์ฉ๋ค์ ๊ธฐ๋ณธ ์์์ผ๋ก ์ง์ ํด์ ์ฌ์ฉํ๊ฒ
),
home: MyPage(), // home์ ์ฑ์ด ์คํ๋ ๋ ๊ฐ์ฅ๋จผ์ ๋ณด์ฌ์ฃผ๋ ํ์ด
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Snack Bar'),
),
body: HomeBody(), // ๋ฐ๋ ๋ถ๋ถ์ ํ ๋ฐ๋๋ฅผ ๋๋ค.
floatingActionButton: FloatingActionButton( // ํ๋กํ
๋ฒํผ๋ ๋ฐฐ์น
child: Icon(Icons.thumb_up),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar( // ์ค์บํด๋๋ฉ์ ์ ๋ง๋ค๊ธฐ
// ๊ฐ์ฅ ๊ฐ๊น์ด ์ค์บํด๋ ์ฐพ์์ ๋ฐํํด
SnackBar( // ์ค๋ต๋ฐ
content: Text('Like a new Snack Bar!'), // ๋ด
duration: Duration(seconds: 5),
action: SnackBarAction( // ์ค๋ต๋ฐ ์ก์
- ์ฐ์ธก์ ๋ฌ๋ฆฌ๋ ์์ดํ
๋ฒํผ!
label: 'Undo',
onPressed: () {
Navigator.push(context, // ๋ค๋น๊ฒ์ด์
ํ์์ผ๋ก pushํ์์ผ๋ก ์ ํ
MaterialPageRoute(builder: (context) => ThirdPage())); // ํ๋ฉด์ ํ ์ฝ๋
},
),
),
);
},
),
);
}
}
class HomeBody extends StatelessWidget {
const HomeBody({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center( // ์ผํฐ์!! ์ฃผ
child: ElevatedButton( // ์๋ ๋ฒ ์ดํฐ๋ ๋ฒํผ
child: Text('Go to the second page'),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => SecondPage())); // ๋๋ฒ์จฐ ํ์ด์ง๋ก ์ ํ
},
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: Text(
'"์ข์์๊ฐ ์ถ๊ฐ๋์์ต๋๋ค."',
style: TextStyle(fontSize: 20.0, color: Colors.redAccent),
),
),
);
}
}
class ThirdPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScaffoldMessenger(
child: Scaffold(
appBar: AppBar(
title: Text('Third Page'),
),
body: Builder( // ๋น๋๋ฅผ ํตํด์ context๋ฅผ ๋ฐ์์ผ ํด.
builder: (context){
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'"์ข์์๋ฅผ ์ทจ์ํ์๊ฒ ์ต๋๊น?"',
style: TextStyle(fontSize: 20.0, color: Colors.redAccent),
),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar( // ์ค์บํด๋ ๋ฉ์ ์ ๊ฐ ์ค๋ต๋ฐ ๋ค๊ณ ์์!!
// ์ด๋ ๊ฒ ํ๋ฉด ํ๋ฉด์ ๋น ์ ธ๋๊ฐ์ context๊ฐ ์ฌ๋ผ์ง๋ฉด ์ค๋ต๋ฐ๊ฐ ์ฌ๋ผ์ ธ์ UI๊ฐ์
content: Text("์ข์์๊ฐ ์ทจ์๋์์ต๋๋ค"),
duration: Duration(seconds: 3),
));
},
child: Text('์ทจ์ํ๊ธฐ'),
),
],
),
);}
),
),
);
}
}
์ฃผ์๊น๊ฒ ๋ด์ผํ ์ ์ ๋ํด์๋ง ๊ฐ๋จํ ์ง๊ณ ๋์ด๊ฐ์.
โ body ๋ถ๋ถ์ HomeBody๋ฅผ ๋์ด ๋ฐ๋ก ๊ตฌํํ๋ค๋ ์ .
๋ด๊ฐ ํ๋ฌํฐ๋ฅผ ๋ฐฐ์ฐ๋ฉด์ ์์ ฏ์ด๋ผ ๊ฐํธํ๋ค๋ ์๊ฐ์ ๋๋๋ฐ ์ฝ๋๊ฐ ๋ง์์ง๊ณ ๊ธธ์ด์ง์๋ก ์ ์ง๋ณด์๊ฐ ๋๋ฌด ํ๋ค ๊ฑฐ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋๋ฐ ๋ถ๋ฆฌํ ์ ์์ด์ ๊ทธ๋๋ง ๋คํ.. ๋์์ธ ํจํด์ ๋ํด์ ๋์์์ด ๊ณต๋ถํด์ผ๊ฒ ๋ค!
โ ๋ค์์ ๋ฒํผ๋ค์ธ๋ฐ, ์ด๊ฑด ๋ญ ๊ทธ๋ฅ ๋ณด๋ค๋ณด๋ฉด ๋์ ์ต์ผ๋๊น!!
โ ThirdPage์ชฝ์์ return ScaffoldMessenger๋ก ๊ฐ์ผ ํ์ child๋ก Scaffold๋ฅผ ์ฌ์ฉํ๊ณ , ๊ฑฐ๊ธฐ์ builder๋ฅผ ๋ถ์ธ ํ์ builder ํ๋ผ๋ฏธํฐ๋ฅผ ํตํด์ context๋ฅผ ์ฃผ์ด์ ๊ตฌํํ๋ค๋ผ๋ ์ ์ด๋ค.
์ด๊ฒ์ด ์ ๋๋จํ๋๋ฉด, ScaffoldMessenger๊ฐ ํธ์ถ๋๊ณ ๋ ํ์ 3์ด ๋์ ์ง์ํด์ผ ํ๋๋ฐ ์ ์ ๋ผ backButton์ ํตํด์ ํ๋ฉด์ ๋๊ฐ๋ฒ๋ฆฌ๋ฉด? ๊ทธ๋ฌ๋ฉด ๊ธฐ์กด์๋ SnackBar๊ฐ ๋จ์์๋ ๋ฌธ์ ๊ฐ ์๋๋ฐ ์ด๋ ๊ฒ ๊ตฌํํ๋ฉด ํ๋ฉด์ ๋๊ฐ๋ ์ฆ์ ์ค๋ต๋ฐ๊ฐ ์ฌ๋ผ์ง๋ค.
์ ๊ทธ๋ด๊น? builder๋ก ์ค context๋ฅผ ์ฐธ์กฐํ์ฌ ํ๋ฉด์ด ๋๊ฐ๋ฉด builder๊ฐ ์ฌ๋ผ์ ธ์ Scaffold๋ฅผ ๋์ฃผ๊ฒ ๋๋ฏ๋ก ์ฌ๋ผ์ง๊ฒ ๋๋ค.
์ฝ๊ฒ ๋น๊ตํด๋ณผ ์ ์๋๊ฒ์ด ์ฒซ ํ์ด์ง์์๋ ์ข์์๋ฅผ ๋๋ฅด๊ณ ๊ฐ์ด๋ฐ ์๋ฆฌ๋ฒ ์ดํฐ๋ ๋ฒํผ์ ๋๋ฅด๋ฉด ์ค๋ต๋ฐ๊ฐ ๋จ์์๋๋ฐ, ํ์คํ ์ฐจ์ด๋ฅผ ๋๋ ์ ์๋ค.
์๋ ์ฌ์ง์ ๋ณด์.
โ Second Page๋ก ์ด๋ํด๋ ์ค๋ต๋ฐ ๋จ์์์
โ ThirdPage๋ฅผ ๋ณด์. ์ค๋ต๋ฐ ์ฆ์ ์ฌ๋ผ์ง
์ด๋ค ์ฐจ์ด๊ฐ ์๋์ง ์๊ฒ ๋๊ฐ?
๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ๋ ผ๋ฆฌ์ ์ผ๋ก ์๋ฒฝํ ์ดํดํ์์ ํ๋ฒ ๋ ์ ๋ฆฌํด๋ณด์
๋ด๊ฐ ํ๋ฆฐ์ ์ด ์์ ์๋ ์์ด์ ์์ผ๋ฉด ์๋ ค์ฃผ์ธ์~!
'flutter > ์ํ๋ง(๊ธฐ์ด)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[flutter] 19๊ฐ | ๋น๋ ์์ ฏ ์์ด ์ค๋ต๋ฐ ๋ง๋ค๊ธฐ ๋ฐ ํ ์คํธ ๋ฉ์์ง (0) | 2021.08.13 |
---|---|
[flutter] 27๊ฐ(ํจ์น๊ฐ์ข) | ํ๋ฌํฐ 2.0 ๋ฒํผ (0) | 2021.08.13 |
[flutter] 17๊ฐ | BuildContext ์ดํดํ๊ธฐ (0) | 2021.08.11 |
[flutter] 16๊ฐ | Drawer ๋ฉ๋ด ๋ง๋ค๊ธฐ 2 (0) | 2021.08.11 |
[flutter] 15๊ฐ | Drawer ๋ฉ๋ด ๋ง๋ค๊ธฐ 1 (0) | 2021.08.10 |