Flutter 이미지 넣기, gif넣기, pubspec.yaml

최근 플러터에 관심이 생겨 코딩셰프님의 유튜브강의를 보며 따라배우고있다.
회원정보화면을 구현하면서 간단하게 이미지넣는 방법에 대해서도 알아보자!

 

  플러터 프로젝트 생성하기

먼저 상단에 View > Command Palette 를 선택하여 Flutter New Application Project 를 눌러 프로젝트를 저장할 위치와 이름을 정해 생성해준다.
또는 Ctrl+Shift+P 단축키를 사용해도 좋다.

debugShowCheckedModeBanner는 flase로 지정 할 시 오른쪽상단에 있는 DEBUG배너를 비활성화해준다. 

 

  AppBar에 배경색 넣기

입력받을 값도없고 이벤트도없기에 StatelessWidget로 extends해주고 title의 style에 색을 넣어줬다. Colors 위젯은 단순한 색뿐만아니라 인자값을 넣어주면 더 세부한 색상을 표현 할 수 있다.

Colors.grey위젯에 Ctrl키를 누른채 마우스오른쪽으로 클릭하면 해당소스로 이동하는데 소스를 쭉 보면 다양한grey세부색상이 존재 한다는걸 확인 할 수 있다.

 

  Body에 이미지 넣기

1. assets 폴더 생성한 후 이미지 담고 pubsoec,.yaml파일의 assets소스 활성화 시키기

NewFolder아이콘을 눌러 폴더명이 assets인 폴더를 생성해준다. 생성된 assets폴더에 이미지를 복사, 붙여넣기해준다.
이제부터가 중요한데 !
pubspec.yaml 소스파일에 보면 주석처리로 비활성화되어있는 assets코딩부분이 있을것이다. 주석을 풀어 활성화시켜 준 후, 추가한 이미지파일의 경로를 적어주면 된다.
assets:
 - assets/catmove.gif
 - assets/cat.png

pubspec.yaml파일은 #이 주석으로 보여준다. 평소했던데로 ctrl+/ 단축키를 사용하여 주석처리를 하면된다.
경로를 적을때 들여쓰기에 주의해야한다. 만약 오류가 발생했을땐 들여쓰기를 잘 조정해보자!

zucca.tistory.com/101 왜 assets폴더명으로 지명해야하는지 궁금하신분들은 참고해보시면 도움이 될거같다.

 

2. CircleAvatar 위젯에 배경이미지 넣기

CirlcleAvatar위젯의 배경화면에 AssetImage위젯을통하여 이미지경로를 입력하여 세팅해준다.

 

기초적인 이미지 넣는 방법은 알겠고, 이제 나머지 코딩을 마져 해보자.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //오른쪽 상단 DEBUG 배너 비활성화
      title: "MyPAGE",
      home: MyPet(),
    );
  }
}

class MyPet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lime,
      appBar: AppBar(
        title: Text(
          "PET IMFORMATION",
          style: TextStyle(
            color: Colors.grey[900],
          ),
        ),
        backgroundColor: Colors.lime[600],
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0), //전체 20패딩
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, //왼쪽으로 정렬됌
          children: [
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/catmove.gif'),
                radius: 60.0,
              ),
            ),
            Divider(
              height: 40.0, //상하 20픽셀씩
              color: Colors.grey[900],
              thickness: 0.5, //선두께
              // endIndent: 20.0, //끝에서 얼마큼 떨어져있을지
            ),
            Text(
              "name",
              style: TextStyle(
                letterSpacing: 2.0,
              ),
            ),
            Text(
              "HIP CAT",
              style: TextStyle(
                  letterSpacing: 2.0,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 20.0,
            ),
            Text(
              "year - sex",
              style: TextStyle(
                letterSpacing: 2.0,
              ),
            ),
            Text(
              "4 - girl",
              style: TextStyle(
                letterSpacing: 2.0,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            Text(
              "kind",
              style: TextStyle(
                letterSpacing: 2.0,
              ),
            ),
            Text(
              "American Short hair Cat",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                letterSpacing: 2.0,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            Row(
              children: [
                Icon(Icons.check_rounded),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  "neutralization",
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_rounded),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  "helath",
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 55,
            ),
            Column(
              children: [
                Center(
                  child: CircleAvatar(
                    backgroundImage: AssetImage('assets/cat.png'),
                    radius: 25.0,
                    backgroundColor: Colors.lime[300],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Text(
                  "Notice if the cat wants to be hugged.\nSometimes cats bother people. The important thing before holding a cat is to know how it feels.",
                  style: TextStyle(
                    fontSize: 12.0,
                  ),
                  textAlign: TextAlign.center,
                ),
                SizedBox(
                  height: 5.0,
                ),
                Text(
                  "Hope everyone hang out with cats.",
                  style: TextStyle(
                    fontSize: 12.0,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

실행된 화면이다. 상단의 gif형식의 이미지도 잘 들어가있고, 하단의 작은 이미지는 png형식의 사진파일이였는데 사진을 세팅하니 투명한 부분이 파랑색으로 배경이 들어가있더라.. 그래서 화면배경색과 같은 lime으로 할까하다가 약간 강조됐음 좋겠다 생각이들어 lime[300]으로 배경색을 넣어줬다. 이미지 배경이 투명처럼 느껴지고싶다면 배경과 같은색을 지정하면 될거같다!