[Flutter_study] Section 1~4 review

★유데미 플러터 강좌의 Section 1~4 정리★

 

- 주요 레이아웃 구성

: Scaffold, AppBar, ,Color, Text, Center, Image, NetworkImage, AssetsImage 등

- 이미지 파일 추가 방법(인터넷 경로/assets 폴더) 

- Icon 변환(android/ios)

 

[main.dart 소스코드]

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
 
//the main function is the starting point for all our Flutter apps.
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: Text('I Am Rich'),
          backgroundColor: Colors.blueGrey[900],
        ),
      body: Center(
        child: Image(
          image: AssetImage('images/diamond.png'),
        ),
      ))
    ),
  );
}
 

 

* 이미지 추가

: pubspec.yaml 파일

- 주석 제거(보기 편하도록)

- assets 들여쓰기 나머지 것들과 맞춰주기(2칸 지우기) -> 안그러면 인식 못함

- images/ 이면 images 폴더 내부의 모든 이미지 한꺼번에 등록

- pub get으로 반영해주기

 

[pubspec.yaml 소스코드]

name: i_am_rich
description: A new Flutter application.
 
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
 
version: 1.0.0+1
 
environment:
  sdk: ">=2.7.0 <3.0.0"
 
dependencies:
  flutter:
    sdk: flutter
 
  cupertino_icons: ^1.0.2
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
flutter:
 
  uses-material-design: true
 
  assets:
    - images/
 
 
 

 

* android 아이콘 설정

1. 이미지 파일을 https://appicon.co/ 를 이용해 아이콘 용으로 만들기

2. res에서 마우스 우클릭 -> show in explorer -> mipmap 폴더 덮어쓰기

+ 추가로 image asset 이용하면 아이콘 크기도 마음대로 조정 가능

 폴더 경로 참고

 

* 프로그램 구조도(참고)

구조도

 

 

실행 결과