Flutter 7주차 (1) - 애셋 활용하기

Flutter 7주차 (1) - 애셋 활용하기

 

 

목차

 

 

프로젝트에 애셋 파일 불러오기

 

애셋을 활용하는 실습에 사용할 images와 assets 디렉터리를 프로젝트에 복사하자.

 

 

 

 

메인 환경 파일에 애셋 등록하기

 

사용할 애셋을 프로젝트 폴더 내부에 가져왔다면 메인 환경 파일인 pubspec.yaml을 열고, 아래와 같이 코드를 작성해서 가져온 애셋들을 등록해야 한다.

 

 

 

 

다트 파일 작성하기

 

이제 lib 폴더 아래에 ch9라는 디렉터리를 하나 만들고 그 안에 test.dart 파일을 만든 후 아래처럼 코드를 작성하자.

 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  // rootBundle을 이용해 애셋 파일을 읽어 반환하는 함수
  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 202316035 박준혁'),
        ),
        body: Column(
          children: [
            Image.asset('images/icon.jpg'),
            Image.asset('images/icon/user.jpg'),
            // 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}');
            })
          ],
        ),
      ),
    );
  }
}

 

 

아래와 같이 아이콘과 텍스트 파일이 출력된다면 성공이다.