[flutter] 19강 | 빌더 위젯 없이 스낵바 만들기 및 토스트 메시지

✅ 이번 시간에는 스낵바와 토스트 메시지에 대해서 알아보자.

스낵바의 경우에는 패치강의에서 보았다.

그래서 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),

          ),
        );
      },
    ));
  }
}

ScaffoldMessenger 결과

 

 

 

✅ 토스트 메시지

이건 생각보다 복잡하다 .. 물론 한경설정 부분이...

환경과 관련하여서 중요한점 몇가지...!

1. pubspec.yaml 쪽에 

fluttertoast: ^8.0.8 를 넣는다.

❗️ 띄어쓰기 잘 맞아야함. ❗️

이후에는 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

fluttertoast | Flutter Package

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); // 글자 크기
}

함수로 구현한 부분 말고는 크게 어려운게 없었다.

다만, 토스트 메시지 부분에서 주석을 한번 꼼꼼하게 보기로 !

 

플러터 토스트 메시지