이번 시간에는 버튼을 학습했다.
단순한 버튼은 아니고 클릭하면 메시지가 뜨게 하는 버튼이다.
Material은 기본적으로 snackbar를 제공하여 메시지를 띄울수있지만 안이쁘다...
난 이쁜걸 원한다...
바로 Toast라는 것이다.
먼저 설치 방법부터 알아보자
1. pubspec.yaml 수정
프로젝트 파일중 pubspec.yaml에 들어가
fluttertoast: ^8.0.9를 넣어준다.
그 다음 위쪽 Pub get을 눌러 load 해준다.
2, main.dart 수정
import 'package:fluttertoast/fluttertoast.dart';
맨 윗줄에 해당 문구 삽입
이렇게 진행 하면 사용준비는 완료이다.
이번 시간에 만들 예제이다.
appbar - 버튼 3개 텍스트 1개
body - 텍스트 1개 버튼2개
로 구성되어있다.
appbar에 있는 버튼은 Toast 기본 설정으로 띄울것이며
body에 있는 Custom Button은 Toast-Custom을 이용
Success Button는 motion-toast를 사용할것이다.
*motion-toast는 별도의 설정이 필요하다... 검색 ㄱㄱ
appBar: AppBar(
title: Center(child: Text("appBar & Toast Test")),
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
showToast('이것은 메뉴입니다.');
}),
actions: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
showToast('이것은 장바구니입니다.');
},
),
IconButton(
icon: Icon(Icons.search_rounded),
onPressed: () {
showToast('이것은 검색입니다.');
},
),
],
),
leading - appbar 맨 왼쪽에 자리잡는 위젯이다.
action - appbar 맨 오른쪽에 자리잡는 위젯이다.
body: Container(
height: double.infinity,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text("Toast 메시지 예제", style: TextStyle(fontSize: 20,),
),
const SizedBox(height: 10,),
Container(width: 200, height: 50,
child: ElevatedButton(
onPressed: () {_showToast();},
child: const Text("Custom Button", style: TextStyle(fontSize: 20,),),
),
),
const SizedBox(height: 10,),
Container(width: 200, height: 50,
child: ElevatedButton(
onPressed: () {_displaySuccessToast(context);},
child: const Text("Success Toast", style: TextStyle(fontSize: 20,),),
),
),
height: double.infinity,
width: double.infinity,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
이 두가지는 항상 쓰려고한다. 왜냐하면 위젯들이 센터로 자리잡을 수 있게 한다.
중간중간 SizeBox를 통해 위젯마다 공간을 주었다.
이제 Toast 부분을 살펴보자
void showToast(String msg2) {
Fluttertoast.showToast(
msg: msg2,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.red,
textColor: Colors.white,
);
}
onPressed: () {
showToast('이것은 장바구니입니다.');
},
이것은 appbar에 들어간 Toast 기본 버튼이다.
Fluttertoast.showToast를 이용하면 쉽게 구현가능하다.
두번째 코드는 호출 코드이다.
코드와 같이 String을 넣어줄수있다.
late FToast fToast;
@override
void initState() {
super.initState();
fToast = FToast();
fToast.init(context);
}
_showToast() {
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.redAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Icon(Icons.check, color: Colors.white,),
SizedBox(
width: 10.0,
),
Text('이것은 커스텀 버튼입니다.', style: TextStyle(color: Colors.white,),),
],
),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 1),
);
}
onPressed: () {
_showToast();
},
Toast를 커스텀 할 수 있는 코드이다.
기본으로 해도 충분히 깔끔하게 나오지만 좀 더 아쉬우면 해당 기능으로 구현해보자.
여럿 값을 만져주면서 어떤 부분이 어떻게 변경되는지 쉽게 확인가능하다.
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:motion_toast/motion_toast.dart';
void main() {
runApp(const appBar());
}
class appBar extends StatelessWidget {
const appBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'appBar & Toast',
theme: ThemeData(primarySwatch: Colors.lightGreen),
home: firstpage(),
);
}
}
class firstpage extends StatefulWidget {
const firstpage({Key? key}) : super(key: key);
@override
State<firstpage> createState() => _firstpageState();
}
class _firstpageState extends State<firstpage> {
late FToast fToast;
@override
void initState() {
super.initState();
fToast = FToast();
fToast.init(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF69abce),
appBar: AppBar(
title: Center(child: Text("appBar & Toast Test")),
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
showToast('이것은 메뉴입니다.');
}),
actions: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
showToast('이것은 장바구니입니다.');
},
),
IconButton(
icon: Icon(Icons.search_rounded),
onPressed: () {
showToast('이것은 검색입니다.');
},
),
],
),
body: Container(
height: double.infinity,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text("Toast 메시지 예제", style: TextStyle(fontSize: 20,),
),
const SizedBox(height: 10,),
Container(width: 200, height: 50,
child: ElevatedButton(
onPressed: () {_showToast();},
child: const Text("Custom Button", style: TextStyle(fontSize: 20,),),
),
),
const SizedBox(height: 10,),
Container(width: 200, height: 50,
child: ElevatedButton(
onPressed: () {_displaySuccessToast(context);},
child: const Text("Success Toast", style: TextStyle(fontSize: 20,),),
),
),
],
),
));
}
void showToast(String msg2) {
Fluttertoast.showToast(
msg: msg2,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.red,
textColor: Colors.white,
);
}
void _displaySuccessToast(context) {
MotionToast.success(
title: Text("Success"),
description: Text("This is Success Toast"),
).show(context);
}
_showToast() {
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.redAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Icon(Icons.check, color: Colors.white,),
SizedBox(
width: 10.0,
),
Text('이것은 커스텀 버튼입니다.', style: TextStyle(color: Colors.white,),),
],
),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 1),
);
}
}
