[Flutter] CircleAvatar & Fonts

flutter CircleAvatar & Fonts

 

 

Flutter는 CircleAvatar라는 Widget이 있습니다.

이미지를 원형에 넣고 싶어서 쓴 기능입니다.

 

 

쓰는 방법은 간단합니다. backgroundImage를 통해 이미지를 넣어줍니다.

child: Column(
              children: <Widget>[
                CircleAvatar(
                  radius: 60.0,
                  backgroundImage : AssetImage('images/img1.jpeg'),

다만 여기서 중요한건 경로 설정입니다.

 

경로 설정은 pubspec.yaml 파일에서 진행합니다.

flutter:

  assets:
    - images/img1.jpeg

저는 images 라는 폴더를 만들었고, 그 안에 img1.jpeg 파일을 넣어줬습니다. 그리고 파이썬 처럼 간격이 매우 중요하기 때문에 유의하시길 바랍니다!

 

---

Font를 사용 할 수 있습니다. 말 그대로 Font를 지정하는 것 입니다.

 

먼저 Fonts 라는 폴더를 만들고 그 안에 ttf 파일을 넣어주도록 하겠습니다. 

저는 Pacifico-Regular 라는 파일과 SourceSansPro-Black 파일 2개를 넣어줬습니다. 

 

경로 설정은 pubspec.yaml에서 진행한다고 했으니 거기로 넘어가서 작성 해보겠습니다.

  fonts:
  - family: Pacifico
    fonts:
        - asset: fonts/Pacifico-Regular.ttf

  - family: Source Sans Pro
    fonts:
      - asset: fonts/SourceSansPro-Black.ttf

경로를 보시면 위 코드블럭과 같이 fonts로 경로를 설정해주고 파일을 지정합니다.

 

그리고 dart파일로 돌아가, font를 사용하는 소스는 다음과 같습니다

반응형

 

 

Text(
                  "Hi, this is test",
                  style: TextStyle(
                    fontFamily:'Pacifico',
                    fontSize: 30.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  )
                ),
                Text(
                  "Thanks Very Much ",
                  style: TextStyle(
                    fontFamily: 'Source Sans Pro',
                    fontSize: 15,
                    color: Colors.teal[100],
                    letterSpacing: 2.5
                  )
                ),

fontFamily 에는 pubspec.yaml에서 지정한 family와 같아야 합니다!!

letterSpaceing:은 글자의 간격을 지정하는 것 입니다.

 

 

Flutter 실행 화면