코딩셰프 플러터 강좌

Flutter 프로젝트 폴더 기본 구조

1. pubspec.yaml
   • 프로젝트의 메타 데이터를 정의 및 관리
   • 버전, 사용 환경 등
2. iOS/Android 폴더
3. test 폴더
   • 개발하기 원하는 dart 코드 테스트 가능
4. lib 폴더
   • 주로 개발 하는 폴더
   • main.dart

기본 코드

VSC 기준

• 시작
  • i+tab: import '';
  • fm+tab: import 'package:flutter/material.dart';
• main
  • runApp(App)
    • 최상위 함수
    • 인자: 만들 위젯

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

• 클래스명과 함수명
  • 클래스명
    • 대문자로 시작
    • Camel case
  • 함수명
    • 소문자로 시작

• stl+tab: Fultter Stateless Widget 클래스 자동 생성
• 클래스명 직접 입력
• 기본 설정

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fist App',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyHomePage(),
    );
  }
}

• 전체코드

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fist App', //앱 총칭
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(), //경로 역할, 없으면 아무것도 안뜸
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First App'), //타이틀바 내용
      ),
      body: Center(
        child: Column(
          children: [Text('hello'), Text('hello'), Text('hello')],
        ),
      ),
    );
  }
}