[Flutter] 스나이퍼팩토리 Flutter 기초과정 (14)

GONG·2023년 4월 10일

flutter 스나이퍼팩토리

스나이퍼팩토리 Flutter

목록 보기

17/44

14일차 과제 링크 👉 14일차 과제

패키지

앱에 일부 기능을 추가해주는 코드 컨테이너
다른 사람이 작성한 코드 꾸러미
다른 패키지를 내 프로젝트에 사용 == 의존한다 == 의존성

의존성 관리 파일

pubspec.yaml : 이미지 등록, 폰트 등록, 패키지 등록

pub.dev

https://pub.dev/
구글에서 운영하는 패키지 공유 공간
찾고자 하는 패키지명을 검색하면 관련된 여러 패키지가 보여진다.

해당 패키지에 들어가면 최신 안정 버전, 분석점수, 인기도, 각종 상세 정보, 사용 가능 플랫폼 등을 확인할 수 있다.

패키지 이름, 버전 옆 복사하기 아이콘 클릭 후 pubspec.yaml 파일의 dependencies에 등록해서 사용
pubspec.yaml

dependencies에 등록 후

상단 Pub get 클릭하면 설치 완료

`english_words: ^4.0.0`

https://pub.dev/packages/english_words
가장 많이 사용된 영어 단어 5000개와 일부 유틸리티 기능이 포함된 패키지
nouns.take(50).forEach(print); 단어 50개 출력

모든 단어 ListView에 보여주기

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    nouns.take(50).forEach(print);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('단어 보여주기'),
        ),
        body: ListView.builder(
          itemCount: nouns.length,
          itemBuilder: (context, index) {
            return Text(nouns[index]);
          }
        ),
      ),
    );
  }
}

`animate_do: ^3.0.2`

https://pub.dev/packages/animate_do
애니메이션을 쉽게 만들 수 있게 도와주는 패키지. 다양한 종류의 애니메이션 효과를 제공함

페이지마다 ZoomIn 애니메이션 적용

import 'package:animate_do/animate_do.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('단어 보여주기'),
        ),
        body: PageView.builder(
          itemCount: nouns.length,
					// 각 페이지를 넘길 때마다 Text가 zoom in 되면서 나타남
          itemBuilder: (context, index) => ZoomIn(
            // 애니메이션 속도
            duration: Duration(milliseconds: 1500),
            child: Center(
                child: Text(nouns[index], style: TextStyle(fontWeight: FontWeight.bold, fontSize: 36),)
            )
          ),
        ),
      ),
    );
  }
}

`badges: ^3.0.3`

https://pub.dev/packages/badges
보다 작은 Chip을 제공하고 보통은 알림수를 표시할 때 사용

PageView의 Text 위에 Badge 추가

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

....

Badge(
  // Badge 안에 표시할 위젯
  badgeContent: Text('A'),
  // Badge 위치
  position: BadgePosition.topEnd(),
  child: Text(
    nouns[index],
    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 36),
  )
)

`fluttertoast: ^8.2.1`

https://pub.dev/packages/fluttertoast
Flutter에서 쉽게 토스트 메시지를 표시할 수 있도록 도와주는 패키지

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

...

TextButton(
  onPressed: () {
    Fluttertoast.showToast(
      msg: nouns[index],
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      fontSize: 16.0
    );
  },
  child: Text('버튼')
),

`font_awesome_flutter: ^10.4.0`

https://pub.dev/packages/font_awesome_flutter
Font Awesome은 각종 아이콘을 제공하는 무료 오픈소스 아이콘 세트

font_awesome_flutter를 사용하면 앱에서 이 아이콘들을 사용할 수 있음

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

...

FaIcon(FontAwesomeIcons.airbnb)

`animated_bottom_navigation_bar: ^1.2.0`

https://pub.dev/packages/animated_bottom_navigation_bar

예쁜 bottomNavigationBar 만들 수 있음

import 'package:animate_do/animate_do.dart';
import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
import 'package:badges/badges.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var pageController = PageController();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('단어 보여주기'),
        ),
        body: PageView.builder(
          controller: pageController,
          itemCount: nouns.length,
          itemBuilder: (context, index) => ZoomIn(
            duration: Duration(milliseconds: 1500),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Badge(
                    // Badge 안에 표시할 위젯
                      badgeContent: Text('A'),
                      // Badge 위치
                      position: BadgePosition.topEnd(),
                      child: Text(
                        nouns[index],
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 36),
                      )
                  ),
                  IconButton(
                    onPressed: () {
                      Fluttertoast.showToast(
                          msg: nouns[index],
                          toastLength: Toast.LENGTH_SHORT,
                          gravity: ToastGravity.CENTER,
                          timeInSecForIosWeb: 1,
                          backgroundColor: Colors.red,
                          textColor: Colors.white,
                          fontSize: 16.0
                      );
                    },
                    icon: FaIcon(FontAwesomeIcons.airbnb)
                  ),
                ],
              )
            )
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            pageController.nextPage(duration: Duration(milliseconds: 300), curve: Curves.bounceOut);
          },
          backgroundColor: Colors.amber,
          child: Icon(Icons.navigate_next),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: AnimatedBottomNavigationBar(
          backgroundColor: Colors.amber,
          icons: [
            FontAwesomeIcons.airbnb,
            FontAwesomeIcons.facebook,
          ],
          activeIndex: 1,
          gapLocation: GapLocation.center,
          onTap: (_) {
            print(_);
          },
        ),
      ),
    );
  }
}