! 이미지와 폰트를 넣고 사용하는 방법을 공부했다

1. 이미지 사용하기

1) 이미지 넣기

프로젝트가 있는 부분을 우클린 한 뒤 [New -> Directory]를 클릭하고 image라는 폴더를 생성했다.

그리고 원하는 이미지를 image 폴더 안에 넣고 pubspec.yaml 파일에 이미지 정보를 넣어주면 된다.

flutter:
  uses-material-design: true
  assets:
    - image/flutter.png

이미지를 추가했으니 이제 위젯에서 이미지를 호출하면 되는데 방법이 총 3가지가 있다.

• file: 외부의 폴더나 갤러리에 있는 파일을 사용하는 경우
• asset: 앱을 만들 때 미리 넣어놓은 파일을 사용하는 경우
• memory: 배열이나 문자열 형태의 이미지 데이터를 사용하는 경우

우리는 여기서 파일을 넣어 놓고 pubspec.yaml 파일에 asset으로 선언해줬기 때문에

Image.asset(이미지_경로) 형태로 호출하면 된다.

코드로 작성하면 다음과 같다.

class ImageWidgetApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState(){
    return _ImageWidgetApp();
  }
}

class _ImageWidgetApp extends State<ImageWidgetApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(title: Text('Imagae Widget'),),
        body: Container(
            child: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.asset('image/flutter.png'),
                    ]
                )
            )
        )
    );
  }
}

이제 저번 시간에 머터리얼 공부할때 작성했었던 main.dart의 home 부분에 ImageWidgetApp을 넣어주고 실행하면 된다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageWidgetApp(),
    );
  }
}

이와 같이 코드 작성을 마쳤을 때 다음과 같이 화면에 이미지가 나오는 것을 볼 수 있따!!!!😁

2) 이미지 크기 조정

Image.asset('image/flutter.png', width: 200, height: 100),

Image.asset의 이미지 경로 뒤에 width, height를 설정해 주면 이미지의 크기를 조정해줄 수 있다.

그리고 width, height 뒤에 Boxfit을 활용하면 이미지 크기를 조절할 수 있다.

• BoxFit.fill : width, height를 가득 채워서 그림

• BoxFit.contain : 이미지가 잘리지 않고 비율이 변하지 않는 범위에서 가능한 한 크게 그린다.

• BoxFit.cover : 비율을 유지한 채 지정한 범위를 모두 덮도록 그린다. 단 이미지가 잘릴 수 있음

• BoxFit.fitWidth : width를 꽉 채워서 그린다. 단 이미지가 잘릴 수 있음

• BoxFit.fitheight

• BoxFit.none : 원본 이미지를 표시

• BoxFit.scaleDown : 전체 이미지가 나올 수 있게 이미지 크기를 조절해서 표시

2. 폰트 변경하기

이미지와 동일하게 font 폴더를 만들어주고 안에 차로에서 사용했었던 폰트 하나를 복사해서 넣어 줬다.

그 뒤 pubspec.yaml 파일에 폰트를 넣어 줬다. 이미지와 동일하게!!

 fonts:
    - family: notosanscjkkr
      fonts:
        - asset: font/noto_sans_cjkkr_bold.otf
          weight: 400

그 뒤에 imagewidget.dart 파일에 이미지 아래에 Text를 추가해 주고 style에 TextStyle() 함수를 이용해 텍스트 모양을 설정해 준다. 그리고 fontFamily에 아까 지정한 이름을 넣어주면 끝!!

class _ImageWidgetApp extends State<ImageWidgetApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(title: Text('Imagae Widget'),),
        body: Container(
            child: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.asset('image/flutter.png'),
                      const Text('Hello Flutter',
                          style: TextStyle(fontFamily: 'notosanscjkkr',
                          fontSize: 30, color: Colors.blue),
                      )
                    ]
                )
            )
        )
    );
  }
}

다음과 같이 이미지 밑에 내가 적용한 Font Style의 Text가 나타나게 된다