기본
앱 생성
- IDE 에서 생성하는 방법
- 커맨드라인에서 생성하는 방법
1
$ flutter create <projectname>
앱 실행
- IDE에서 run 클릭
- 최상위 디렉토리에서 flutter run 입력
import
1
2
3
4
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; // ios 위젯
import 'package:flutter/widgets.dart';
import 'package:flutter/my_widgets.dart';
hello world
1
2
3
4
5
6
7
8
9
10
11
12
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
위젯트리
- flutter에서 거의 모든 것이 위젯임
- 위젯은 위젯트리라고 불리는 계층 구조로 조합됨.
- 각 위젯은 부모의 위젯 내부에 들어가고, 부모로부터 속성을 상속 받음
- 앱 객체 도 위젯이며, 최상위 위젯이 앱 객체임.
다음은 hellow world 위젯
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello world'),
),
),
);
}
}
- 상태가 없는 위젯으로, 한번 만들어지면 변하지 않음
사용자 입력이나 데이터 수신으로 상태가 동적으로 변화한다.
- StatefulWidget에 상태 데이터를 저장하고, 그것을 트리 재구성을 통해 전달하는 State 객체가 있음.
- 너무 많이 감싸져있는 위젯은 함수로 빼거나 작은 클래스로 분리해야한다.
재사용 가능한 컴포넌트 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// React Native
class CustomCard extends React.Component {
render() {
return (
<View>
<Text> Card {this.props.index} </Text>
<Button
title="Press"
onPress={() => this.props.onPress(this.props.index)}
/>
</View>
);
}
}
// Usage
<CustomCard onPress={this.onPress} index={item.key} />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Flutter
class CustomCard extends StatelessWidget {
CustomCard({@required this.index, @required this.onPress});
final index;
final Function onPress;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: <Widget>[
Text('Card $index'),
FlatButton(
child: const Text('Press'),
onPressed: this.onPress,
),
],
)
);
}
}
...
// Usage
CustomCard(
index: index,
onPress: () {
print('Card $index');
},
)
...
프로젝트 구조 및 리소스
시작
- main.dart
1
2
3
4
// Dart
void main(){
print('Hello, this is the main function.');
}
프로젝트 구성
- 초기 상태. 변경가능
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
┬
└ projectname
┬
├ android - Android 관련 파일 포함.
├ build - iOS 및 Android 빌드 파일 저장.
├ ios - iOS 관련 파일 포함.
├ lib - 외부에서 접근할 수 있는 Dart 소스 파일 포함.
┬
└ src - 추가적인 소스 파일 포함.
└ main.dart - Flutter 진입점이며 새로운 앱의 시작.
Flutter 프로젝트를 만들 때 자동으로 생성.
Dart코드 작성을 시작하는 부분임.
├ test - 자동화 테스트 파일 포함.
└ pubspec.yaml - Flutter 앱의 메타데이터 포함.
React Native의 package.json 파일과 동일함.
asset 위치
- pubspec.yaml 파일에 assets을 명시
1
2
3
4
flutter:
assets:
- assets/my_icon.png
- assets/background.png
- 위 파일에 명시된 상대 경로로 asset 파일의 위치가 구분됨.
- 플러터는 런타임때에 읽어올 asset을 asset bundle 이라 불리는 특수한 아카이브에 저장한다.
- 앱에 적합한 해상도의 이미지를 선택할 떄 asset variants 를 사용함
사용법
- 위젯의 build 메서드 안에서 AssetImage 클래스를 사용하여 정적이미지 추가
1
image: AssetImage('assets/background.png'),
네트워크를 통한 이미지 불러오기
1
2
body: Image.network(
'https://flutter-io.kr/images/owl.jpg',
패키지, 패키지 플러그인 설치
- pubspec.yaml 의 dependencies 부분에 패키지 이름과 버전을 추가
1
2
3
4
dependencies:
flutter:
sdk: flutter
google_sign_in: ^3.0.3
- 커맨드라인에서 flutter pub get 을 사용하여 패키지 설치. IDE에서는 버튼클릭