[flutter] 웹 포트폴리오 앱으로 다시 만들어보기

styles 변수 세팅

Root color 설정하기

전에 플러터 잘하시는 분 코드를 보니 앱 컬러와 폰트 스타일을 클래스로 관리하시더라. 웹에서는 보통 root에 컬러를 넣어두거나 하니까.. 좀 신기했다.

• Color: 웹에서 추출한 코드는 FFF7EC 이렇기 때문에 당황스러울 수 있다. 플러터에서는 0xff를 컬러코드 앞에 붙이면 된다. 0x는 뭔지 잘 모르겠지만 중간의 ff는 투명도를 나타낸다. 보니까 16진법으로 나타내는 것 같음.

import 'package:flutter/material.dart';
class AppColors {
  static const bgColor = Color(0xffFFF7EC);
}

이렇게 하니까 컬러를 쓸 때 Colors.red 하듯이 AppColors.bgColor 이렇게 컬러를 설정할 수 있다. 굿굿

Root font style 설정하기

플러터는 컬러는 그렇다쳐도 폰트 설정하는게 많이 성가시다. 그래서 컬러처럼 테마를 설정해두는 게 훨~씬 생산성 있을 것 같음.

import 'package:flutter/material.dart';

class AppTextStyles {
  static const extra = TextStyle(
    fontFamily: 'JejuDoldam',
  );
  static const light = TextStyle(
  fontFamily: 'Pretendard',
  fontWeight: FontWeight.w100,
);

  static TextStyle header20E({Color color = Colors.black}) =>
      extra.copyWith(fontSize: 20, color: color);

extra는 제주돌담체. 제주돌담체는 폰트 굵기가 따로 없기떄문에 포인트로만 줄 것임. 아래 TextStyle로 header20E를 생성했다. header요소에 쓰일 것이고, 폰트사이즈가 20, extra라는 뜻. 컬러를 따로 설정하지 않는다면 black 컬러가 된다. 즉, 컬러에만 자유도를 줌. AppTextStyles.header20E(color: Colors.white) 이런식으로 사용이 가능하다.

main.dart

• 참고: 플러터에서 기본 폰트사이즈는 14임

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Pretendard', //기본 폰트 적용
        scaffoldBackgroundColor: AppColors.bgColor, //배경색 지정
      ),
      home: const Scaffold(
        body: Center(
          child: Text('Nadeuli'),
        ),
      ),
    );
  }
}

env 파일 사용하기

1. root에 .env파일 생성

github에 env파일이 올라가지 않도록 gitignore에 .env를 꼭 기재한다.
모르고 깃허브에 올리면 삭제하고 다시 올리면 되긴 하지만 복잡하다...

2. flutter_dotenv: ^5.1.0 다운로드

flutter_dotenv: ^5.1.0

3. pubspec에 env 추가

  assets:
    - .env

4. env 변수 사용하기

import 'package:flutter_dotenv/flutter_dotenv.dart';

String apiKey = dotenv.env['VAR_NAME'];

DropdownButton 사용하기