목차
3.1 명령줄을 사용하여 Flutter 프로젝트 만들기
1. 소개
모바일 장치 및 운영 체제의 다양화로 인해 크로스 플랫폼 프런트 엔드 애플리케이션 개발은 프런트 엔드 개발에서 중요한 주제가 되었습니다. Flutter는 교차 플랫폼 모바일 애플리케이션 개발 프레임워크로서 iOS, Android, Web과 같은 플랫폼을 동시에 지원할 수 있어 개발 비용을 크게 줄이고 개발 효율성을 높일 수 있습니다. 이 블로그에서는 환경 구성, 기본 사용, UI 디자인, 상태 관리 및 네트워크 요청과 같은 핵심 콘텐츠를 포함하여 Flutter를 사용하여 크로스 플랫폼 프런트 엔드 애플리케이션을 개발하는 방법을 단계별로 안내합니다.
2. 환경공사
Flutter로 개발을 시작하기 전에 개발 환경을 설정해야 합니다.
2.1 Flutter SDK 설치
먼저 Flutter SDK를 설치해야 합니다. Flutter는 플랫폼 간 프런트 엔드 애플리케이션을 개발하는 데 도움이 되는 풍부한 도구와 라이브러리를 제공합니다.
- Flutter 공식 웹사이트( https://flutter.dev/)로 이동하여 운영 체제에 해당하는 Flutter SDK를 다운로드합니다 .
- 다운로드한 SDK의 압축을 풀고 시스템의 PATH 환경 변수에 추가합니다.
2.2 IDE 설치
Flutter는 Android Studio, Visual Studio Code 등과 같은 여러 통합 개발 환경(IDE)을 지원합니다. 익숙하거나 개발하고 싶은 IDE를 선택하십시오.
- Android Studio: Android Studio를 열고 Flutter 플러그인을 설치하고 Flutter 프로젝트를 만듭니다.
- Visual Studio Code: VS Code를 열고 Flutter 플러그인을 설치하고 VS Code의 확장 기능을 통해 Flutter 프로젝트를 만듭니다.
2.3 환경 확인
다음 명령을 실행하여 Flutter 환경이 성공적으로 빌드되었는지 확인합니다.
flutter doctor
모두 제대로 진행되면 다음과 유사한 출력이 표시됩니다.
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.58.0)
[✓] Connected device (3 available)
• No issues found!
3. 첫 번째 Flutter 앱 만들기
개발 환경을 설정한 후 첫 번째 Flutter 애플리케이션 생성을 시작할 수 있습니다.
3.1 명령줄을 사용하여 Flutter 프로젝트 만들기
다음 명령을 실행하여 hello_flutter다음과 같은 Flutter 프로젝트를 만듭니다.
flutter create hello_flutter
이렇게 하면 현재 디렉터리에 이름이 지정된 hello_flutterFlutter 프로젝트가 생성됩니다.
3.2 Flutter 애플리케이션 실행
Flutter 프로젝트를 생성한 후 에뮬레이터 또는 실제 기기에서 애플리케이션을 실행할 수 있습니다.
- Android Studio 사용: Android Studio를 열고 을 선택한
Open an existing Android Studio project다음hello_flutter프로젝트 디렉토리를 선택하고 를 클릭합니다OK. 다음으로 에뮬레이터를 선택하거나 실제 머신에 연결하고 실행 버튼을 클릭합니다. - VS Code 사용: VS Code를 열고
hello_flutter프로젝트 디렉터리를 연 다음F5실행 버튼을 누르거나 탭합니다. 에뮬레이터를 선택하거나 실제 장치에 연결하고 실행 버튼을 클릭합니다.
모든 것이 잘 진행되면 에뮬레이터 또는 실제 기기에서 실행되는 간단한 Flutter 앱을 볼 수 있습니다.
4. Flutter 기본 지식
크로스 플랫폼 프런트엔드 애플리케이션 개발을 시작하기 전에 Flutter에 대한 몇 가지 기본 지식을 이해해야 합니다.
4.1 위젯
Flutter에서는 모든 것이 위젯입니다. 위젯은 Flutter 애플리케이션의 빌딩 블록이며 사용자 인터페이스를 구축하는 데 사용됩니다. Flutter는 텍스트, 버튼, 그림 등과 같은 다양한 UI 요소를 구축하기 위한 많은 수의 위젯을 제공합니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello Flutter'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
위의 코드에서 우리는 Flutter 애플리케이션을 만들고 애플리케이션의 기본 구조를 빌드하는 데 사용 MyApp했습니다 . 자식 구성 요소를 중앙에 배치하는 앱 바를 만드는 데 사용됩니다 .MaterialAppScaffoldAppBarCenter
4.2 상태 저장 위젯과 상태 비저장 위젯
Flutter에서 위젯은 Stateful Widget과 Stateless Widget의 두 가지 유형으로 나뉩니다.
- 상태 비저장 위젯: 일단 결정되면 속성을 변경할 수 없는 불변 위젯입니다. 예 를 들어
Text등Icon - Stateful Widget: 애플리케이션의 상태에 따라 속성이 변경될 수 있는 변수 Widget입니다. 예 를 들어
ListView등TextField
class CounterApp extends StatefulWidget {
@override
_CounterAppState createState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Count: $_count'),
ElevatedButton(
onPressed: _increment,
child: Text('Increment'),
),
],
),
),
),
);
}
}
위의 코드에서 CounterApp카운터를 표시하기 위해 Stateful Widget이라는 Stateful 위젯을 만들었습니다. 버튼을 클릭하면 카운터 값이 증가합니다.
4.3 라우팅 및 탐색
Flutter에서 라우팅 및 탐색은 페이지 사이를 이동하고 데이터를 전달하는 데 사용됩니다.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text('Go to Second Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go Back'),
),
),
);
}
}
위의 코드에서 우리는 두 개의 페이지를 만들었습니다: HomePage및 SecondPage. HomePage버튼을 클릭하면 SecondPage해당 페이지로 이동합니다. SecondPage페이지 에서 버튼을 클릭하면 이전 페이지로 돌아갑니다.
4.4 네트워크 요청
실제 개발에서는 일반적으로 데이터를 얻고 제출하기 위해 백엔드 서버와 상호 작용해야 합니다. Flutter는 httpHTTP 요청을 보내기 위한 라이브러리를 제공합니다.
import 'package:http/http.dart' as http;
Future<void> fetchData() async {
final response = await http.get('https://api.example.com/data');
if (response.statusCode == 200) {
print('Data: ${response.body}');
} else {
print('Failed to load data');
}
}
MethodChannel위의 코드에서 플랫폼 채널을 생성하고 통신 식별자를 지정하는 데 사용합니다 . Flutter에서는 메서드를 통해 네이티브 코드의 메서드를 호출하고 매개변수를 전달할 수 있습니다 invokeMethod. 네이티브 코드에서 Flutter가 네이티브 코드와 상호 작용할 때 해당 메서드를 등록하고 해당 로직을 실행해야 합니다.
7.2 네이티브 코드로 메소드 구현하기
네이티브 코드에서는 해당 플랫폼 개발 언어를 사용하여 플랫폼 채널에 정의된 메서드를 구현해야 합니다.
Android 플랫폼(자바/Kotlin):
package com.example.channel_example;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;
public class MainActivity extends FlutterActivity {
private static final String CHANNEL = "com.example.channel";
@Override
public void configureFlutterEngine(FlutterEngine flutterEngine) {
super.configureFlutterEngine(flutterEngine);
new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
.setMethodCallHandler((call, result) -> {
if (call.method.equals("nativeMethod")) {
String message = "Hello from Native";
result.success(message);
} else {
result.notImplemented();
}
});
}
}
위의 코드에서 우리는 Flutter에 의해 호출되는 메서드를 등록 FlutterMethodChannel하고 nativeMethod간단한 메시지를 반환했습니다.
8. 패키징 및 배포
Flutter 애플리케이션 개발을 완료한 후 애플리케이션을 패키징하고 다른 플랫폼에 배포할 수 있습니다.
8.1 포장
Flutter에서는 다음 명령을 사용하여 애플리케이션을 패키징할 수 있습니다.
flutter build apk # 打包Android应用
flutter build ios # 打包iOS应用
flutter build web # 打包Web应用
8.2 배포
패키징이 완료되면 사용자가 다운로드하여 사용할 수 있도록 생성된 애플리케이션 파일을 애플리케이션 스토어 또는 웹 서버에 업로드할 수 있습니다.
- Android 앱의 경우 생성된 APK 파일을 Google Play 스토어에 업로드할 수 있습니다.
- iOS 앱의 경우 생성된 IPA 파일을 Apple App Store에 업로드할 수 있습니다.
- 웹 애플리케이션의 경우 생성된 빌드 파일을 웹 서버에 업로드할 수 있습니다.
9. 요약
이 블로그의 실제 데모를 통해 Flutter를 사용하여 환경 구성, 기본 사용, UI 디자인, 상태 관리, 네트워크 요청, Flutter와 네이티브 코드 간의 상호 작용과 같은 핵심 콘텐츠를 포함하여 크로스 플랫폼 프런트 엔드 애플리케이션을 개발하는 방법을 배웠습니다. , 패키징 및 배포.
Flutter는 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로서 풍부한 기능과 강력한 성능을 갖추고 있으며 대규모 프런트 엔드 애플리케이션을 개발할 때 큰 가치가 있습니다. 이 블로그가 Flutter 개발에 영감을 주셨기를 바랍니다. 읽어주셔서 감사합니다!