안녕하세요 ~ 오랜만에 뵙습니다. 이번에 team 프로젝트로 flutter, node.js, MySQL을 사용한 애플리케이션 제작에 들어가게 됐습니다. 그래서 Flutter 공부에 들어가게 됐는데요. 오늘은 설치와 가벼운 코드 Emulator 사용까지 가보도록 하겠습니다.
개발환경은 Visual Studio Code를 사용했습니다. 한동안 intellij를 사용했어서 꽤나 검색하며 사용했습니다.
먼저 Flutter extension과 Dart extension을 다운로드 해주셔야 합니다. Dart는 C언어와 유사한 언어라고 생각하시면 됩니다.
만약 제대로 다운로드 되지않으신다면 VSCode를 재부팅해보시는 것을 추천드립니다.
이후 ctrl + shift + P 를 통해 new Project 생성을 해주시면 됩니다.
이후 터미널에서 "flutter doctor" 명령어를 입력하시면 오류 또는 경고 표시가 뜰 수 있는데 내용은 다음과 같습니다.
저는 거의 다운로드가 되어있었는데 android SDK가 다운로드 되어있지 않아서 Android studio를 실행한 뒤
3번째 줄에 보이시는 Android SDK를 다운로드 해 주었습니다.
아래 보시는 창이 SDK를 설치하기전 flutter doctor --android-licenses 명령어를 입력했을 때와 설치 후 모습입니다.
설치 후에는 모두 y를 입력하시면 SDK설치가 완료됩니다.
간단한 코드를 넣어 실행까지 해보겠습니다.
main.dart
import 'package:flutter/material.dart';
import 'package:quiz_app/screen/screen_home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Quiz App',
home: HomeScreen(),
);
}
}screen_home.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget{
@override
_HomeScreenState createState()=> _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen>{
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
double width = screenSize.width;
double height = screenSize.height;
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: const Text('MyQuizApp'),
backgroundColor: Colors.deepPurple,
leading: Container(),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child: Image.asset(
'images/quiz.jpg',
width: width* 0.8,
),
),
],
),
),
);
}
}'images/quiz.jpg'는 적절한 이미지를 images폴더를 생성하셔서 넣어주시면 됩니다.
이후 ctrl + shift + P 를 통해 Launch Emulator를 실행하신 뒤
우측상단에 있는 프로그램 실행을 누르시면 다음과 같은 창이 실행됩니다.
코드는 인프런 권태뽕 님의 플러터 무료강의로 가시면 더욱 자세히 확인하실수 있습니다.
