Flutter

플러터 - 애셋

마루설아 2025. 4. 1. 20:03
flutter:
  uses-material-design: true

  assets:
    - images/
    - images/icon/
    - assets/text
    
    ...

 

pubspec.yaml 애셋 경로 설정하기

 

 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // 에셋 이용을 위한 rootBundle 제공

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

class MyApp extends StatelessWidget{
  // rootBundle을 이용해 애셋 파일을 읽어 반환하는 함수
  // Future는 비동기 데이터를 의미
  Future<String> useRootBundle() async{
    return await rootBundle.loadString('assets/text/my_text.txt');
  }

  // DefaultAssetBundle을 이용해 애셋 파일을 읽어 반환하는 함수
  Future<String> useDefaultAssetBundle(BuildContext context) async{
    return await DefaultAssetBundle.of(context).loadString('assets/text/my_text.txt');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar : AppBar(
          title: Text('TEST'),
        ),
        body : Column(
          children: [
          	// 이미지 애셋 불러오기
            Image.asset('images/icon.jpg'),
            Image.asset('images/icon/user.png'),

            // FutureBuilder는 비동기 데이터를 이용해 화면을 구성하는 위젯
            FutureBuilder(
              future: useRootBundle(),          // useRootBundle() 함수 호출
              builder: (context, snapshot){     // useRootBundle() 함수의
                                                // 결과값이 snapshot에 전달되며
                                                // 이 값으로 화면 구성
                return Text('rootBundle : ${snapshot.data}');
              }
            ),
            FutureBuilder(
              future: useDefaultAssetBundle(context),
              builder: (context, snapshot){
                return Text('DefaultAssetBundle : ${snapshot.data}');
              }
            )
          ],
        )
      ),
    );
  }
}

 

 

 

'Flutter' 카테고리의 다른 글

플러터 - 이미지 위젯  (0) 2025.04.08
플러터 - 텍스트 위젯  (0) 2025.04.02
플러터 - 위젯 키  (0) 2025.03.28
플러터 - 동적 화면 생성  (0) 2025.03.24
플러터 - 정적 화면 생성  (0) 2025.03.24