플러터 프로젝트 폴더와 기본 코드 이해하기

pubspec.yaml : 앱을 만들때 필요한 여러가지 중요한 내용을 등록하는 파일 (getx나 image파일 등)

lib : 앱 만들때 주로 사용하는 폴더 

 

main.dart

import 'package:flutter/material.dart';

material 파일에 있는 모든 것을 사용할 수 있음 앞으로 무조건 import

void main() {

  runApp(const MyApp());

}

앱의 시작점 

 

클래스명 => 대문자 (MyApp())

함수명 => 소문자 main()

MaterialApp()

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

      primarySwatch: Colors.blue,

      ),

      home: const MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}

title : 제목

thema : 테마

primarySwatch : 색깔 속성

home : 앱 실행시 처음 보이게 되는 부분

Scaffold

return Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            const Text(

              'You have pushed the button this many times:',

            ),

            Text(

              '$_counter',

              style: Theme.of(context).textTheme.headline4,

            ),

          ],

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: _incrementCounter,

        tooltip: 'Increment',

        child: const Icon(Icons.add),

      ), // This trailing comma makes auto-formatting nicer for build methods.

    );

appBar : 상단 표시

body : 가운데 표시

 

 

출처 : https://youtu.be/b5wbsJFXVTM