flutter강좌 이미지파일 넣는 방법

 

예시이미지파일.zip

0.08MB

 

오늘은 flutter 이미지 추가하는 방법을 알아보겠습니다.

먼저 입력할 이미지 파일을 준비합니다.

(위에 예시 이미지파일을 올려두었습니다.)

 

 

그 후에 pubspec.yaml이 있는 폴더 동일 경로에 이미지들을 넣어줄 images 폴더를 만듭니다. (우클릭 New -> Directory)

 

images폴더에 이미지파일들을 넣어주기 위해 images우클릭 후 Show in Explorer 하여 images 경로로 이동합니다.

 

파일을 images 폴더에 넣어줍니다.

 

pubpec.yaml에 들어가서 주석처리 되있는 assets부분의 주석처리를 없애주고

- images/파일이름.확장자 형태로 입력해 줍니다.

EX) - images/dog_1.png

입력 후 꼭 Packges get을 클릭하여야 합니다.

 

이제 이미지를 입력할 준비는 다되었습니다. 코드를 입력해 봅시다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
          SizedBox(
            height: 200,
              width: 200,
              child: Image.asset('images/dog_1.png')),

            SizedBox
              (height: 200,
                width: 200,
                child: Image.asset('images/dog_2.png')),

            SizedBox(
                height: 200,
                width: 200,
                child: Image.asset('images/dog_3.png')),

          ],
        ),
      ),// This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

이미지 입력의 주된 코드를 살펴보면

이미지를 출력하는 코드는 image.asset('images/파일이름.확장자') 입니다. 

그런데 이미지의 크기가 너무 커서 오류가 날 수 있습니다.

그럴 때는 SizedBox를 활용해서 이미지의 크기를 작게 할 수 있습니다.

height->이미지 높이 설정, width -> 이미지 넓이 설정,

 

SizedBox(
height: 200,
width: 200,
child: Image.asset('images/dog_1.png')),

SizedBox
(height: 200,
width: 200,
child: Image.asset('images/dog_2.png')),

SizedBox(
height: 200,
width: 200,
child: Image.asset('images/dog_3.png')),

 

결과

*주의*

pubpec.yaml assets 부분을 입력하고 Packages get을 할 때 오류가 자꾸 발생했는데 aseets의 라인을 잘 안 맞춰줘서 그런 거였습니다. 하실 때 위의 명령어와 라인을 맞춰주시고 띄어쓰기에 주의합시다.