1. 'assets' 디렉토리 추가
프로젝트의 Root Directory 의 하위 디렉토리로 assets를 추가합니다. 우리가 앱을 개발할 때 사용하는 lib 디렉토리와 같은 depth에 만들어야 합니다. 물론 assets 말고 다름 이름도 사용 가능합니다.
현재 진행중인 프로젝트에서는 image 외 다른 유형의 리소스를 사용할 예정은 없지만, 추후 확장성을 위해 assets 하위에 images 디렉토리를 추가로 만들었습니다.
2. pubspec.yaml 수정
Flutter 프로젝트에서 assets의 리소스들을 사용할 수 있도록 pubspec.yaml 파일을 수정해야 합니다.
name: chai_booster
description: A new Flutter project.
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
{dependencies... 생략 ...}
dev_dependencies:
build_runner:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/images/ 👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈
YAML
복사
3. Dependency Install
flutter pub get
YAML
복사
4. Example
import 'package:chai_booster/Providers/Auth/AuthProvider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
class LoginPage extends StatefulWidget {
LoginPage({
Key key, this.title
}) : super(key: key);
final String title;
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
AuthProvider authProvider;
Widget build(BuildContext context) {
authProvider = Provider.of<AuthProvider>(context);
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset('assets/images/booster.png'),
SizedBox(height: 80),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: SizedBox(
child: ElevatedButton(
onPressed: () => {
authProvider.signInAnonymously()
},
child: Text('차이부스터 시작하기'),
),
width: double.infinity,
height: 44,
)
),
SizedBox(height: 12,)
],
),
),
);
}
}
Dart
복사
4. 후기
역시 RN 보단 Flutter 