강2월드

타자로 타이핑 한 것 같은 효과를 내보자

여기 공구 관리 시스템 문자가 너무 심심해보인다.

있어 보이는 것처럼 하기위해 타이핑 효과를 추가해보자!

animated_text_kit

animated_text_kit (Flutter Package of the Week) - YouTube

1. installing

dependencies:
  animated_text_kit: ^4.2.1

pubspec.yaml 파일에 추가한다.

flutter pub get 한후

2. usage

class CourseDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 600,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '공구관리 시스템.\n 새롭게',
            style: TextStyle(
                fontWeight: FontWeight.w800, height: 1.2, fontSize: 80),
          ),
          SizedBox(
            height: 30,
          ),
          Text(
            'NFC 태그를 이용한 공구 추적 \n'
            '관리자로서 손쉽게 공구 관리하세요.',
            style: TextStyle(fontSize: 21, height: 1.7),
          )
        ],
      ),
    );
  }
}

위의 코드에서 

해당 부분에 애니메이션을 적용할 것이다. 

import 'package:animated_text_kit/animated_text_kit.dart';

맨위에서 패키지를 import 해온다 .

class CourseDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 600,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // Text(
          //   '공구관리 시스템.\n 새롭게',
          //   style: TextStyle(
          //       fontWeight: FontWeight.w800, height: 1.2, fontSize: 80),
          // ),
          SizedBox(
            height: 90,
            child: AnimatedTextKit(
              animatedTexts: [
                TypewriterAnimatedText(
                  '공구관리 시스템\n새롭게',
                  textStyle: const TextStyle(
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold,
                  ),
                  speed: const Duration(milliseconds: 200),
                ),
              ],
              repeatForever: true,
              pause: const Duration(milliseconds: 100),
              displayFullTextOnTap: true,
              stopPauseOnTap: false,
            ),
          ),
          SizedBox(
            height: 30,
          ),
          Text(
            'NFC 태그를 이용한 공구 추적 \n'
            '관리자로서 손쉽게 공구 관리하세요.',
            style: TextStyle(fontSize: 21, height: 1.7),
          )
        ],
      ),
    );
  }
}

이렇게 적용했다

주의해야하는 점은 두줄 일 경우 높이가 변하기 떄문에 sized 박스에 묶어서 보내는게 좋을 것 같다. 

뭐 대충 이렇게 했지만 

animated_text_kit | Flutter Package (pub.dev)

좋은 예제들 많으니까 참고하시길

엣지에서는

크롬에서는

이렇게 크게 출력된다.

어떻게 하지?

MediaQuery를 사용한다. 

textScaleFactor를 1 로 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
            child: child!);
      },
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: Theme.of(context).textTheme.apply(fontFamily: 'OpenSans')),
      home: const HomeView(),
    );
  }
}

firebase deploy 하고 확인하면 

짜잔! 크롬 브라우저에서도 정상적인 크기로 출력된다 .

다음에 MediaQuery가 뭐하는 용도인지 알아보자 

이게 될때가 있고 안될때가 있지만
다시 해보자

flutter web 으로 프로젝트를 만들었다고 가정합니다.

1. firebase console에서 프로젝트를 만듭니다.

해도 그만 안해도 그만이다.

계정 선택하고 프로젝트를 만들면된다 .

2. 터미널에서 명령하기

 - 1단계: Firebase CLI 설치 

node.js 가 필요하다 .

npm install -g firebase-tools

npm 으로 firebase 를 전역변수로 설치합니다. 

firebase login

그리고 login 하는게 정신 건강에 좋습니다.

- 2단계: 프로젝트 초기화

firebase init

Are you ready to proceed? Yes

방금 만든 프로젝트를 사용하기 위해 

Use an existing project 

한다. 

What do you want to use as your public directory? build/web

웹 프로젝트 build 용 public 폴더의 위치는 어디에다 할 것인가? 

일반적으로 build 폴더의 web 폴더에 만드는것이 편한다

나중에 flutter build web 할때 위에 지정한 폴더에 web 프로젝트가 빌드된다. 

 Configure as a single-page app (rewrite all urls to /index.html)? 
Yes

프로젝트를 spa 로 구성할거냐 물어볼건데 그냥 spa로 해보자 

git hub 연결은 일단 안했다 .

$ flutter build web

$ firebase deploy

build web을 하는 순간 위에 지정한 폴더에 프로젝트가 빌드되고

firebase deploy 를 하면 배포된다. 

firebase 기본 화면이 뜰때도 있지만 그냥 조금 기다렸다가 되는 경우도 있다. 

참고자료: Building a Website In Flutter - Flutter Web Beginners Tutorial - YouTube