dev/flutter

[Flutter] 전체 이미지 띄우기 + 폰트 설정

캄춰 2023. 12. 12. 11:35
728x90
반응형

pubspec.yaml에서 assets 내용 주석 해제

assets:
 - images/a_dot_burr.jpeg
 - images/a_dot_ham.jpeg

 

 

assets파일 생성

: 하위에 'images'폴더 생성

 

 

yaml에 다음과 같이 작성 

 

 

 

이미지 위젯에 이미지 띄우기

: Image위젯을 사용하였다.

: Image(image: AssetImage('assets/images/img_splash_bg.png')

 

또는

return Center(
  child: Image.asset('assets/images/img_splash_bg.png'),
);

 

 

근데 왠걸 Asset not found 에러가 발생한다.

 

 

왜냐하면 pubspec.yaml에서 assets하위에 부모 경로를 설정하지 않았기 때문.

 

 

그런데도 안됐다.

대다수 글을 보면 저렇게 띄어쓰기가 문제입니다 하지만

정말 중요한건 flutter하위에 있어야 하는 점이 중요한거다 ...

: 난 계속 왼쪽 벽에 붙였었다... 

 

 

 

 

정상적으로 표출된다^^

 

+ 이미지를 꽉채우고 싶은 경우 

부모 뷰를 Expanded위젯으로 감싸고, 

Image내 fit을 Boxfit.cover를 설정해준다.

 

 

그래도 이미지가 안나온다면 Hot Reload가 아닌 다시 앱을 빌드하도록 ~ 

 


2024-01-09-화 : 폰트 추가

reference : 코드팩토리 도서

 

assets:
  - assets/middle_image.png
#   - images/a_dot_ham.jpeg
fonts:
  - family: parisienne  # family 키에 폰트 이름 지정 가능
    fonts:
      - asset: fonts/Parisienne-Regular.ttf

  - family: sunflower
    fonts:
      - asset: fonts/Sunflower-Light.ttf
      - asset: fonts/Sunflower-Medium.ttf
        weight: 500
      - asset: fonts/Sunflower-Bold.ttf
        weight: 700
theme: ThemeData(
  fontFamily: 'sunflower',
  textTheme: TextTheme(
    headlineLarge: TextStyle(
      color: Colors.white,
      fontSize: 80.0,
      fontWeight: FontWeight.w700,
      fontFamily: 'parisienne',
    ),
    headlineMedium: TextStyle(
      color: Colors.white,
      fontSize: 50.0,
      fontWeight: FontWeight.w700,
    ),
    bodyMedium: TextStyle(
      color: Colors.white,
      fontSize: 30.0,
    ),
    bodySmall: TextStyle(
      color: Colors.white,
      fontSize: 20.0,
    )
  ),
),
728x90
반응형