Flutter image 추가하기 및 안될 때 체크사항

viiviii·2021년 10월 27일

flutter version 2.5.2 기준으로 작성됨

플러터로 개발 시 이미지 추가가 잘 안된다는 질문이 종종 올라오는데 디렉토리 구조를 비교해 보고, 하단의 안될 때 체크사항도 확인해 볼 것!

디렉터리 구조

예제를 위해서 나는 총 두 개의 directory를 추가하여 진행한다 - assets와 images

pubspec.yaml

⭐중요⭐ 탭/띄어쓰기를 잘 신경 쓸 것!

flutter:
  uses-material-design: true
  assets:
    - assets/profile/
    - images/

assets: 띄어쓰기 2칸
- assets/... ,- images/ 띄어쓰기 4칸

사용 코드

Image.asset('assets/profile/yellow.jpeg'),
Image.asset('images/green.png'),

전체 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('assets-and-images'),
        ),
        body: ListView(
          children: <Widget>[
            Image.asset('assets/profile/yellow.jpeg'),
            Image.asset('images/green.png'),
          ],
        ),
      ),
    );
  }
}