[flutter-08] SnackBar와 Toast message

1. 빌더 없이 SnackBar 구현

• MyApp의 build -> MySnackBar의 build로 context가 2개 생성되어 Scaffold.of가 불러 낼 위치의 정보를 정확히 찾을 수 있습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("SnackBar"),
          centerTitle: true,
        ),
        body: MySnackBar(),
      )
    );
  }
}

class MySnackBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // final size = MediaQuery.of(context).size;
    return Center(
      child: RaisedButton(
          child: Text('show me'),
          onPressed: () {
            Scaffold.of(context).showSnackBar(SnackBar(
              content: Text(
                "Hellow",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white
                ),
              ),
              backgroundColor: Colors.teal,
              duration: Duration(milliseconds: 1000),
            ));
          }),
    );
  }
}

2. Toast message 구현

• 사용자에게 많이 사용되는 메시지입니다.
• Toast message를 사용하려면 flutertoast lib를 사용해야 합니다.
• fluttertoast는 내장되어 있지 않아 pubspec.yaml의 dependencies에서 추가해주어야 합니다.
  • fluttertoast: ^7.1.6
  • import 'package:fluttertoast/fluttertoast.dart';

-> toast 색상이 변경되지 않는데 api 버전 문제이지 않을까 합니다. 문제는 해결하지 않음

새로 빌드하면 된다.

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Toast Message"),
          centerTitle: true,
        ),
        body: Center(
          child: FlatButton(
            onPressed: () {FlutterToast();},
            child: Text("Toast"),
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

void FlutterToast() {
  // print('FlutterToast');
  Fluttertoast.showToast(
      msg: "Flutter",
      gravity: ToastGravity.BOTTOM,
      backgroundColor: Colors.redAccent,
      fontSize: 20.0,
      textColor: Colors.white,
      toastLength: Toast.LENGTH_SHORT
  );
}