[패캠] 외부 패키지 사용법 이해

들어가기 앞서...

외부 패키지를 사용하는 방법을 알아볼 것이다. 

리액트에서 개발한것과 같이 편리하게 만들어 놓은 외부 라이브러리를 가져와 쓴다 라고 생각하면된다.

출처 : https://flutter-ko.dev/docs/development/packages-and-plugins/using-packages

패키지 사용하기

 

---

본문으로...

1.  패키지는 pub.dev 에 있다!

https://pub.dev/

Dart packages

사용하고 싶은 기능을 검색하면 패키지가 나온다.

 

패키지 결과 수 높은 것과 정렬을 사용해서 좋아요 높은순을 사용하자!

 

2. 외부 패키지 적용하자! (두가지 방법이 있다.)

출처 ) https://pub.dev/packages/fluttertoast

2-1. pubspec.yaml 라이브러리를 복사해서 저장하자!

dependencies:
  fluttertoast: ^8.1.1

 

2-2. 터미널에 입력하자!

flutter pub add fluttertoast

그렇다면, pubspec.lock 에서 추가 된거 확인가능하다.

 

 

만약 추가가 안되었다면, 상단에 다운로드 버튼을 누르자!

 

3. import 하기!

import 'package:fluttertoast/fluttertoast.dart';

 

3-1. 재정의 없이 토스트 사용하기! 

overide 없이 사용하면, 바로 테스트 가능하지만, 따로 구체적인 커스텀이 불가능하다. (Duration, Positioned 불가능! )

 

body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: "토스트 메세지입니다 :)",
                      toastLength: Toast.LENGTH_LONG,
                      gravity: ToastGravity.BOTTOM,
                      timeInSecForIosWeb: 15,
                      backgroundColor: Colors.grey,
                      textColor: Colors.white,
                      fontSize: 16.0);
                },
                child: const Text('btn')),
            const Center(
              child: Text('hi'),
            )
          ]),

 

 

3-2 토스트 메세지 커스텀 하기

class _HomePageState extends State<HomePage> {
// FToast 를 담을 멤버변수 선언
  late FToast fToast;

// initState() 를 통해 초기 실행되었을때 딱한번 build 함수가 실행되면, 토스트메세지의 생성자를 호출한다!
  @override
  void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  // 눌렀을때 함수 호출
                  _showToast();
                },
                child: const Text('btn')),
            const Center(
              child: Text('hi'),
            )
          ]),
    );
  }

  void _showToast() {
    // 위젯을 toast 라는 변수에 담은것.
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      // 박스 데코레이션, 박스 테두리 둥글게, 색 조정
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.greenAccent,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          // 아이콘
          Icon(Icons.check),
          // 여백을 위한 SizedBox
          SizedBox(
            width: 12.0,
          ),
          // 글자
          Text("This is a Custom Toast"),
        ],
      ),
    );

    // 호출 방법 1
    fToast.showToast(
      // child 가 받는 반환타입 은 위젯(Type: widget)
      child: toast,
      // 어느 위치에 출력할 것인지
      gravity: ToastGravity.BOTTOM,
      // 토스트 메세지를 얼마나 표시할 것인지
      toastDuration: const Duration(seconds: 2),
    );

    // 호출 방법 2
    // 포지션 커스텀 : 포지션을 정해서 child 담긴 toast 를 그린 것이다.
    fToast.showToast(
        child: toast,
        toastDuration: const Duration(seconds: 2),
        positionedToastBuilder: (context, child) {
          return Positioned(
            top: 16.0,
            left: 16.0,
            child: child,
          );
        });
  }
}

---

숙제) flutter_easyloading  패키지로 로딩을 만들어봐라!

출처 : https://pub.dev/packages/flutter_easyloading

flutter_easyloading | Flutter Package

 

1. 외부 패키지 pubspec.yaml 에 적기!

dependencies:
  flutter_easyloading: ^3.0.5

2. import 하기!

import 'package:flutter_easyloading/flutter_easyloading.dart';

 

3. README.md 따라하기!

3-1. EasyLoading 의 초기화는 MaterialApp/ CupertinoApp 에 작성해준다.

return MaterialApp(
    title: 'hello',
    home: MyHomePage(),
    builder: EasyLoading.init(),        
);

3-2. 사용하고 싶은 곳에 함수 호출!

body: Column(
    ElevatedButton(
        onPressed: () {
          // 눌렀을때 함수 호출                   
          EasyLoading.showSuccess('Great Success!');
        },
        child: const Text('btn')
    ),
)

 

3-3 로딩 상태를 콜백하는 함수 사용!

body: Column(
    ElevatedButton(
        onPressed: () {
            // 눌렀을때 함수 호출                   
            EasyLoading.showSuccess('Great Success!');
            // 로딩 상태 콜백하는 함수
            EasyLoading.addStatusCallback((status) {
	            print('EasyLoading Status $status');
            });
        },
        child: const Text('btn')
    ),
)

 

디버그 콘솔 내용) show, dismiss  가 출력할떄, 사라질때 잘 나온다.

3-3 로딩 상태를 콜백 하는 걸 삭제하는 함수 사용!

body: Column(
    ElevatedButton(
        onPressed: () {
            // 눌렀을때 함수 호출                   
            EasyLoading.showSuccess('Great Success!');
            // 로딩 상태 콜백하는 함수
            EasyLoading.addStatusCallback((status) {
	            print('EasyLoading Status $status');
            });
            // 로딩 상태 콜백 삭제하는 함수
            EasyLoading.removeAllCallbacks();
        },
        child: const Text('btn')
    ),
)

---

끝으로...

1. 외부 패키지 2가지 사용법을 알았다!
2. 패키지를 커스텀 하는 방법을 알았다!

---