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

viiviii·2021년 10월 27일
0

flutter version 2.5.2 기준으로 작성됨

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

디렉터리 구조

  • 예제를 위해 총 두 개의 directory를 추가하여 진행 - assetsimages

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);

  
  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'),
          ],
        ),
      ),
    );
  }
}

안될 때 체크사항

  • 앱 재시작
    • flutter pub get 후 앱 다시 시작
  • pubspec.yaml
    • 들여쓰기가 잘못되진 않았는가?
    • 디렉토리 or 파일명 or 파일 확장자에 오타가 있진 않은가?
  • 사용한 코드
    • 디렉토리 or 파일명 or 파일 확장자에 오타가 있진 않은가?

공식문서 링크

https://flutter.dev/docs/development/ui/assets-and-images

0개의 댓글