[Flutter] 기본 코드

이지우·2022년 10월 20일
0

플러터

목록 보기
2/2
  1. Flutter 프로젝트 폴더의 구성
  2. 코드의 기본 내용 이해하기 / 앱 페이지 기본 구성 공식화 해보기
  3. 첫 번째 flutter 앱 실행

Flutter 프로젝트 폴더의 구성

pubspec.yaml

앱을 만들때 자주 사용해야할 파일
여러 필요한 중요한 내용들을 등록하게 됨

프로젝트의 메타 데이터를 정의하고 관리하는 곳
ex) 프로젝트의 버전, 사용 환경, dart의 버전 등

android, ios

각 플랫폼에 맞게 앱을 배포하기 위한 정보가 들어있음

test

개발하기 원하는 각종 dart 관련 코드를 테스트해볼 수 있음

lib ★

main.dart 파일이 들어있음

앞으로 앱을 만들 때 99%를 이 폴더에서 작업해야함


main.dart

우선 flutter material 라이브러리를 가져와야함
flutter 프레임워크 (SDK)에 포함된 모든 기본 위젯과 material 디자인 테마 요소들을 사용하기 위함

※ material 디자인 : 모바일, 데스크탑, 그외 디바이스를 아우르는 일관적인 디자인을 위해서 google이 제공한 가이드라인

import 'package:flutter/material.dart';
// i 입력 -> import 선택 -> fm 입력 -> 패키지 선택

// 앱의 시작점    => : fat arrow
void main()	=> runApp(MyApp());	// 최상위 함수
  • runApp() 함수
    최상위 함수라 한 번만 호출하면 됨
    Argument 값으로 위젯을 가짐
  • MyApp 위젯
    커스텀 위젯 (이름을 마음대로 지정 가능함, 직접 만들어야됨)
    최상위 함수가 최초로 불러온 위젯으로 Widget tree에서 최상위에 위치함
    스크린 레이아웃을 최초로 빌드하는 역할을 함

MyApp 위젯

레이아웃을 빌드하는 뼈대를 만드는 위젯이므로 stateless widget임

import 'package:flutter/material.dart';

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

// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
	
    widget build(BuildContext context) {
    	return materialApp(
        
        );
    }
}

모든 커스텀 위젯은 또다른 위젯을 return하는 build() 함수를 가지고 있음
Flutter material 라이브러리를 사용하는 기능을 가진 위젯인 materialApp이 return 되도록 작성

-> Flutter 프레임워크가 제공하는 모든 오브젝트와 기본 테마를 사용할 수 있게 됨


MaterialApp

반드시 Argument들을 가져야 함

  • 문자열 title
  • theme
    ThemeData 위젯 : 앱의 기본적인 디자인 테마
    - primarySwatch (Argument) : 앱에서 기본적으로 사용할 색상 견본

▼ 앱을 총칭하는 기본 타이틀 만들기

import 'package:flutter/material.dart';

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

// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
	
    Widget build(BuildContext context) {
    	return materialApp(
        	title: 'First app',
            theme: ThemeData(
            primarySwatch: Colors.blue
            ),	// ThemeData <- closing label
        ); // MaterialApp
    }
}

MyHomePage 위젯

앱을 실행했을 때 가장 먼저 보이는 화면
커스텀 위젯

import 'package:flutter/material.dart';

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

// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
	
    Widget build(BuildContext context) {
    	return materialApp(
        	title: 'First app',
            theme: ThemeData(
            primarySwatch: Colors.blue
            ),	// ThemeData <- closing label
        home: MyHomePage()
        ); // MaterialApp
    }
}

Scaffold 위젯

앱 화면에 다양한 요소들을 배치하고 그릴 수 있도록 도와주는 위젯
이 위젯이 없으면 그 어떤 요소들도 앱 화면에 배치할 수 없음

// 커스텀 위젯 (MyHomePage()) 만들기
// 문자 출력만 할거라 정적 위젯으로 만듬
class MyHomePage extends StatelessWidget {
	
    Widget build(BuildContext context) {
    	return Scaffold(
        	appBar: AppBar(
            	title: Text('First app'),
            ),	// AppBar
            body: Center(
            	child: Column(
                	children: <Widget>[
                    	Text('Hello'),
                    	Text('Hello'),
                    	Text('Hello')
                    ],	// <Widget>[]
                ),	// Column
            ),	// Center
        );	// Scaffold
    }
}

※ Argument

  • appBar
    Scaffold의 Argument로 AppBar 위젯을 사용함

  • title
    AppBar의 Argument로 Text 위젯을 사용함

  • body
    Scaffold의 Argument로 Center 위젯 사용함

  • child
    Center의 Argument로 Column 위젯 사용함

※ materialApp 위젯에서와 Scaffold 위젯에서의 title 차이점

  • materialApp 위젯
    앱의 이름을 나타냄
    Text 위젯을 사용하지 않고 바로 문자열 입력

  • Scaffold 위젯
    앱의 상단바에 나타나는 text
    Text 위젯을 사용해야 함

Column 위젯은 요소들을 세로로 정렬해줌
요소들이 여러개 있어야되므로 Argument로 children (위젯 배열) 필요함

MyHomePage라는 위젯을 만들지 않고 바로 Scaffold 위젯을 적어주어도 됨

import 'package:flutter/material.dart';

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

// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
	
    Widget build(BuildContext context) {
    	return materialApp(
        	title: 'First app',
            theme: ThemeData(
            primarySwatch: Colors.blue
            ),	// ThemeData <- closing label
        	home: Scaffold(
        		appBar: AppBar(
            		title: Text('First app'),
            	),	// AppBar
            	body: Center(
            		child: Column(
                		children: <Widget>[
                    		Text('Hello'),
                    		Text('Hello'),
                    		Text('Hello')
                    	],	// <Widget>[]
                	),	// Column
            	),	// Center
        	);	// Scaffold
        ); // MaterialApp
    }
}

사용하지 않는 이유 : 웹 페이지 수가 많아지면 코드가 너무 길어져서 한 페이지에 길게 작성하는 것보다 따로 떼어서 다른 페이지에 작성하는 것이 좋음


profile
노력형 인간

0개의 댓글