[Flutter] 플러터 입문기 , 잔잔한 에러 해결

안녕하세요 ~ 오랜만에 뵙습니다. 이번에 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" 명령어를 입력하시면 오류 또는 경고 표시가 뜰 수 있는데 내용은 다음과 같습니다. 

flutter doctor명령어를 실행하였을때의 터미널창

저는 거의 다운로드가 되어있었는데 android SDK가 다운로드 되어있지 않아서 Android studio를 실행한 뒤

안드로이드 스튜디오 setting창

3번째 줄에 보이시는 Android SDK를 다운로드 해 주었습니다.

 

아래 보시는 창이 SDK를 설치하기전 flutter doctor --android-licenses 명령어를 입력했을 때와 설치 후 모습입니다.

flutter doctor 명령어를 실행한 터미널

설치 후에는 모두 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를 실행하신 뒤

Launch Emulator

 우측상단에 있는 프로그램 실행을 누르시면 다음과 같은 창이 실행됩니다.

퀴즈 앱 이미지

코드는 인프런 권태뽕 님의 플러터 무료강의로 가시면 더욱 자세히 확인하실수 있습니다.