[flutter] 3...Button(Toast... )

이번 시간에는 버튼을 학습했다.

단순한 버튼은 아니고 클릭하면 메시지가 뜨게 하는 버튼이다.

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),
    );
  }
}