플러터로 Hello World 앱 만들기

Flutter로 모바일 앱을 만들려면 다음 기본 단계를 따르세요.

Flutter SDK를 설치하고 Android Studio 또는 Visual Studio Code와 같은 IDE(통합 개발 환경)를 설정합니다.

IDE에서 새 프로젝트를 만들고 Flutter를 프로젝트 유형으로 선택합니다.

Flutter 앱의 빌딩 블록인 위젯을 사용하여 사용자 인터페이스를 디자인합니다.

Flutter에서 사용하는 프로그래밍 언어인 Dart를 사용하여 앱 로직을 구현합니다.

에뮬레이터 또는 실제 기기에서 앱을 테스트합니다.

마지막으로 앱을 패키징하여 앱 스토어(iOS App Store 또는 Google Play Store)에 배포합니다.

앱에서 사용할 수 있는 미리 빌드된 많은 구성 요소를 제공하는 Flutter 문서와 위젯 및 라이브러리를 숙지하는 것도 좋은 생각입니다.

앱이 기기에서 예상대로 표시되고 작동하도록 하려면 타겟팅하는 플랫폼(iOS 또는 Android)에서 제공하는 모범 사례 및 지침을 따르는 것도 중요합니다.

Hello world 앱 만들기

위젯의 속성으로 HomePage확장 StatelessWidget되고 제공 되는 별도의 위젯을 사용하도록 코드를 리팩터링했습니다 . 이렇게 하면 기본 앱 파일에서 홈 페이지의 레이아웃과 스타일을 분리할 수 있으므로 유지 관리 및 업데이트가 더 쉬워집니다.homeMaterialApp

또한 텍스트 위젯과 해당 스타일을 별도의 _buildTitle()및 _buildSubtitle()메서드로 추출했습니다. 이렇게 하면 build()메서드를 깨끗하고 읽기 쉽게 유지하는 데 도움이 되며 앱 전체에서 동일한 텍스트 위젯을 쉽게 재사용할 수 있습니다.

또한 앱에 일관된 테마를 정의할 수 있는 theme속성을 위젯에 추가했습니다. MaterialApp이 경우 기본 색상을 로 설정 Colors.blue하고 시각적 밀도를 로 설정 VisualDensity.adaptivePlatformDensity하여 앱 레이아웃을 실행 중인 플랫폼에 맞게 조정했습니다.

SharedPreferences패키지를 사용하여 장치에서 사용자 이름을 유지합니다. 메서드 는 _saveName사용자 이름을 장치에 저장하고 메서드는 장치에서 _loadName사용자 이름을 로드합니다. 이 initState메소드는 _loadName앱이 처음 열릴 때 양식에 사용자 이름이 표시되도록 앱이 시작될 때 호출하는 데 사용됩니다.

또한 이 _buildForm메서드 TextFormField는 사용자 이름을 수락하는 데 사용되는 를 만듭니다. 메서드는 사용자 의 validator입력을 검증하는 데 사용되며 메서드는 사용자의 입력을 변수 onSaved에 저장하는 데 사용됩니다 ._name

이것은 단순한 예라는 점에 유의해야 합니다. 실제 애플리케이션에서는 데이터베이스 또는 클라우드 스토리지 사용과 같이 데이터를 유지하는 다양한 방법을 고려할 수 있습니다.

모든 데이터 관련 논리를 처리하는 "Data"라는 새 클래스를 추가했습니다. 이 클래스에는 사용자가 입력한 이름을 저장하는 "_name"이라는 개인 변수가 있습니다. 또한 이 클래스에 "loadName" 및 "saveName"이라는 두 가지 메서드를 추가했습니다. "loadName" 메소드는 (SharedPreferences 패키지를 사용하여) 장치의 로컬 저장소에서 이름을 검색하고 "_name" 변수에 할당합니다. "saveName" 메소드는 이름을 매개변수로 받아 장치의 로컬 저장소에 저장합니다. _HomePageState 클래스에서 Data 클래스의 인스턴스를 만들고 양식 및 저장 버튼에 몇 가지 추가 논리를 추가했습니다. 저장 버튼을 누르면 폼의 "validate", "save" 메소드가 호출되며,

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _formKey = GlobalKey<FormState>();
  final _data = Data();

  @override
  void initState() {
    super.initState();
    _data.loadName();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _buildTitle(),
            SizedBox(
              height: 20.0,
            ),
            _buildSubtitle(),
            SizedBox(
              height: 20.0,
            ),
            _buildForm(),
            SizedBox(
              height: 20.0,
            ),
            _buildSaveButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildTitle() {
    return Text(
      'Hello World',
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    );
  }

  Widget _buildSubtitle() {
    return Text(
      'Welcome to my app',
      style: TextStyle(
        fontSize: 20.0,
        color: Colors.white,
      ),
    );
  }

  Widget _buildForm() {
    return Form(
      key: _formKey,
      child: TextFormField(
        initialValue: _data.name,
        decoration: InputDecoration(
          labelText: 'Your name',
          border: OutlineInputBorder(),
        ),
        validator: (value) {
          if (value.isEmpty) {
            return 'Please enter your name';
          }
          return null;
        },
        onSaved: (value) {
          _data.saveName(value);
        },
      ),
    );
  }

  Widget _buildSaveButton() {
    return RaisedButton(
      child: Text('Save'),
      onPressed: () {
        if (_formKey.currentState.validate()) {
          _formKey.currentState.save();
        }
      },
    );
  }
}

class Data {
  String _name
  String get name => _name;

  Future<void> loadName() async {
    final prefs = await SharedPreferences.getInstance();
    _name = prefs.getString('name') ?? '';
  }

  Future<void> saveName(String name) async {
    _name = name;
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('name', name);
  }
}