✅ 이번 시간에는 스낵바와 토스트 메시지에 대해서 알아보자.
스낵바의 경우에는 패치강의에서 보았다.
그래서 ScaffoldMessenger를 이용해서 스스로 강의의 오류를 수정할 수 있었어
강의에서는 2개로 나눠서 강의를 진행하는데 ScaffoldMessenger와 Toast메시지로 나눠어서 발표한다.
특히, 토스트 메시지 쪽에서 error가 있었어서 error 해결하는 것까지 적어두었으니 꼭 보기
✅ ScaffoldMessenger 사용하기
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.green // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
),
home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Snack Bar'),
centerTitle: true,
),
body: MySnackBar(),
);
}
}
class MySnackBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: Text('Show me'),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
// 스캐폴드메신저 만들기
// 가장 가까운 스캐폴드 찾아서 반환해
SnackBar(
// 스낵바
content: Text(
'Hello',
textAlign: TextAlign.center, // 중앙정렬
style: TextStyle(color: Colors.white), // 텍스트
),
backgroundColor: Colors.teal,
duration: Duration(seconds: 1),
),
);
},
));
}
}
✅ 토스트 메시지
이건 생각보다 복잡하다 .. 물론 한경설정 부분이...
환경과 관련하여서 중요한점 몇가지...!
1. pubspec.yaml 쪽에
❗️ 띄어쓰기 잘 맞아야함. ❗️
이후에는 Pub Get을 통해서 업데이트 한다.
❗️에러 떴을 때 해결 방법❗️
[verbose-2:ui_dart_state.cc(199)] unhandled exception: missingpluginexception
(no implementation found for method showtoast on channel ponnamkarthik/fluttertoast)
#0 methodchannel._invokemethod (package:flutter/src/services/platform_channel.dart:156:7) <asynchronous suspension>
#1 fluttertoast.showtoast (package:fluttertoast/fluttertoast.dart:100:17) <asynchronous suspension>
1. 우선 pubspec.yaml쪽에 인덱스를 잘 맞춰서 적었는지 확인한다.
2. 공식 사이트를 가서 버전이 맞는지 확인한다.
https://pub.dev/packages/fluttertoast
3. 앱을 완전히 껐다가 다시 킨다.
import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// 실질적으로 모든 앱을 감싸고 있다.
title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
theme:
ThemeData(primarySwatch: Colors.green // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
),
home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Toast Bar'),
centerTitle: true,
),
body: Center(
child: TextButton(
onPressed: () {
print('TextButton is clicked');
flutterToast(); // 함수 호출
},
child: Text('Toast'),
//color: Colors.blue
),
),
);
}
}
void flutterToast() {
Fluttertoast.showToast(
msg: "This is Center Short Toast", // 메시지 내용
toastLength: Toast.LENGTH_SHORT, // 메시지 시간 - 안드로이드
gravity: ToastGravity.BOTTOM, // 메시지 위치
timeInSecForIosWeb: 1, // 메시지 시간 - iOS 및 웹
backgroundColor: Colors.red, // 배경
textColor: Colors.white, // 글자
fontSize: 16.0); // 글자 크기
}
함수로 구현한 부분 말고는 크게 어려운게 없었다.
다만, 토스트 메시지 부분에서 주석을 한번 꼼꼼하게 보기로 !
'flutter > 순한맛(기초)' 카테고리의 다른 글
[flutter] 21강 | Column, Row 위젯 (0) | 2021.08.16 |
---|---|
[flutter] 20강 | 컨테이너 위젯 (container widget) 되짚어 보기. (0) | 2021.08.13 |
[flutter] 27강(패치강좌) | 플러터 2.0 버튼 (0) | 2021.08.13 |
[flutter] 18(26)강 | 플러터 2.0 SnackBar 와 ScaffoldMessenger (0) | 2021.08.12 |
[flutter] 17강 | BuildContext 이해하기 (0) | 2021.08.11 |