플러터Flutter로 단어 암기앱 만들기 1

개발환경

OS : 맥 Big Sur 11.3.

개발툴 :   Android Studio 4.2

 

새 프로젝트 만들기

 

 안드로이드 스튜디오 시작 후 웰컴 화면에서 Create New Flutter Project를 선택

 

이미 설치된 Flutter SDK 위치를 선택 한 후 Next 클릭

 

프로젝트 이름 등 정보를 입력

Project name : wordtalk_black 
  //프로젝 네임은  소문자와 언더스코어 조합으로 작성하여야 한다.  그냥 룰이다. 

Organization : com.zetty.

  //패키지 네임으로 프로젝트명과 합쳐저 com.zetty.wordtalk_balck 가 된다.

Platforms : 

  //배포하고자 하는 플랫폼이다.  현재 안드로이드(플레이스토어), iOS(앱스토어), Web(크롬등 인터넷 브라우져)을 지원한다.

  배포하고자 하는 플랫폼을 모두 선택한다.

 

위에서 언급했듯이 프로젝트명은 소문자와 언더스코어만 허용한다.  그렇치 않을 경우 위와 같은 경고를 준다.

 

이제 프로젝트가 만들어졌다.  기본적인 구조는 위와 같다.

바로 실행도 된다.

아래 화면과 같이 타겟 디바이스를 선택하고 연두색 실행(Run) 버튼을 누르면 된다.

여기서는 삼성 갤럭시 노트가 USB케이블로 맥북에 연결되어 있다.

 

 

삼성 갤럭시 노트에서 실행된 모습니다.

삼성 갤럭시 노트에서 실행 된 모습

크롬 브라우져에서 실행된 모습

타킷을 크롬으로 선택 후 실행하면 된다.

크롬 브라우져에서 실행된 모습

대박!!

 

한번에 코딩으로 안드로드, 아이폰, 웹을 위한 앱을 만들 수 있다.  

 

간단히 타이틀 정도 바꿔보고 이번 시간은 마무리 하도록 하자

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

기본 생성된 코드이다.  

이제 타이틀을 "워드톡 블랙"으로 바꿔보자

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //앱 타이들
      title: '워드톡 블랙',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      
      //페이지 타이틀
      home: MyHomePage(title: '단어장 리스트'),
    );
  }
}

위와 같이 코드를 수정 후 저장 하면 따로 실행하지 않아도 대부분의 경우 변경사항이 배포된 앱에 바로 적용된다.

이것은 "핫 리로드 Hot Reload" 기술 덕분으로 변경된 사항만 빠르게 적용하여 생산성을 높일 수 있는 기술이다.

https://flutter.dev/docs/development/tools/hot-reload

 

실행 모습