플러터:화면 하나 만들기 - 편집 역사

Sam: /* 개요 */

2026-01-07T00:39:21Z

개요

← 이전 판		2026년 1월 7일 (수) 00:39 판
5번째 줄:		5번째 줄:

	> 하여, 하면을 만드는 것부터 찬찬히 살펴보자.		> 하여, 하면을 만드는 것부터 찬찬히 살펴보자.

			* 기본적으로 위젯을 상속하여 위젯을 만들고,
			* build 함수를 오버라이드 하여 작성함.

	== 화면 하나 만들기(구글식 디자인) ==		== 화면 하나 만들기(구글식 디자인) ==

2025년 11월 16일 (일) 11:00에 Sam님의 편집

2025-11-16T11:00:14Z

← 이전 판		2025년 11월 16일 (일) 11:00 판
6번째 줄:		6번째 줄:
	> 하여, 하면을 만드는 것부터 찬찬히 살펴보자.		> 하여, 하면을 만드는 것부터 찬찬히 살펴보자.

	== 화면 하나 만들기(~~안드로이드~~ 디자인) ==		== 화면 하나 만들기(구글식 디자인) ==
	<syntaxhighlight lang="dart">		<syntaxhighlight lang="dart">
	import 'package:flutter/material.dart'; // 마테리얼 디자인 관련 임포트.		import 'package:flutter/material.dart'; // 마테리얼 디자인 관련 임포트.
17번째 줄:		17번째 줄:
	class MyApp extends StatelessWidget {		class MyApp extends StatelessWidget {
	// 생성자. super.key는 위젯을 구분하는 용도로 사용되는 키값.		// 생성자. super.key는 위젯을 구분하는 용도로 사용되는 키값.
	const MyApp({super.key}); // 없어도 되는데, 없으면 안됨. 상태관리 할 때 키를 통해 화면을 갱신함.		const MyApp({super.key}); // 없어도 되는데, 없으면 안됨. 같은 타입의 위젯에 대해 상태관리 할 때 키를 통해 화면을 갱신함.

	@override		@override

2025년 11월 16일 (일) 10:57에 Sam님의 편집

2025-11-16T10:57:03Z

← 이전 판		2025년 11월 16일 (일) 10:57 판
67번째 줄:		67번째 줄:
	\|구글에서 주로 사용하는 디자인 형식이다.		\|구글에서 주로 사용하는 디자인 형식이다.
	없어도 되지만.. 전체적인 디자인 테마, 페이지 라우트, 따위를 관리하기에 기본적으로 사용한다.		없어도 되지만.. 전체적인 디자인 테마, 페이지 라우트, 따위를 관리하기에 기본적으로 사용한다.

			AppBar, FloatingActionButton, Drawer, Card, IconButton 등 Material 스타일의 위젯 제공.
	\|		\|
	\|-		\|-
	\|		\|Scaffold
	\|		\|화면의 기본적인 뼈대. 다음과 같은 속성을 갖는다.

			* AppBar (상단 바)
			* body (화면의 메인 내용)
			* FloatingActionButton (둥근 액션 버튼)
			* Drawer (옆에서 나오는 메뉴)
			* BottomNavigationBar (하단 네비게이션 바)
			* SnackBar 표시하기 위한 구조 제공

			* bottomSheet, persistentFooterButtons 등
	\|		\|
	\|}		\|}

Sam: 새 문서: {{플러터}} == 개요 == 보통 책을 보면 이미 개념이 탄탄하게 잡힌 개발자가 쓴 것들이기에... 마테리얼앱을 사용하거나 이것저것 고급 스킬들을 별 설명 없이 쓰는데, 코딩 자체가 익숙하지 않은 비전공자들에겐 차근차근 나아가는 과정이 필요하다. > 하여, 하면을 만드는 것부터 찬찬히 살펴보자. == 화면 하나 만들기(안드로이드 디자인) == im...

2025-11-16T10:51:22Z

새 문서: {{플러터}} == 개요 == 보통 책을 보면 이미 개념이 탄탄하게 잡힌 개발자가 쓴 것들이기에... 마테리얼앱을 사용하거나 이것저것 고급 스킬들을 별 설명 없이 쓰는데, 코딩 자체가 익숙하지 않은 비전공자들에겐 차근차근 나아가는 과정이 필요하다. > 하여, 하면을 만드는 것부터 찬찬히 살펴보자. == 화면 하나 만들기(안드로이드 디자인) == <syntaxhighlight lang="dart"> im...

새 문서

{{플러터}}

== 개요 ==
보통 책을 보면 이미 개념이 탄탄하게 잡힌 개발자가 쓴 것들이기에... 마테리얼앱을 사용하거나 이것저것 고급 스킬들을 별 설명 없이 쓰는데, 코딩 자체가 익숙하지 않은 비전공자들에겐 차근차근 나아가는 과정이 필요하다.

> 하여, 하면을 만드는 것부터 찬찬히 살펴보자.

== 화면 하나 만들기(안드로이드 디자인) ==
<syntaxhighlight lang="dart">
import 'package:flutter/material.dart'; // 마테리얼 디자인 관련 임포트.

void main() {
runApp(const MyApp());
}

// 앱 전체를 나타내는 위젯 (StatelessWidget) 트리 전체를 관리한다.
class MyApp extends StatelessWidget {
// 생성자. super.key는 위젯을 구분하는 용도로 사용되는 키값.
const MyApp({super.key}); // 없어도 되는데, 없으면 안됨. 상태관리 할 때 키를 통해 화면을 갱신함.

@override
Widget build(BuildContext context) { // 빌드로 화면을 어떻게 정의할지 보여준다.
return MaterialApp( // 안드로이드 형태의 UI 구성성
title: 'Stateless Demo',
home: const HomeScreen(),
);
}
}
// 하나의 화면 담당.
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Basic Layout")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("위젯은 이렇게"),
SizedBox(height: 20),
Text("쌓고, 정렬하고, 배치함"),
],
),
);
}
}
</syntaxhighlight>

=== 이해를 위한 추가 설명 ===
{| class="wikitable"
|+
!요소
!설명
!비고
|-
|모든 것은 위젯.
|기본적으로 클래스에서 기본이 되는 클래스를 상속, 함수(위젯)를 오버라이드해 사용한다.
Widget build(BuildContext context) { 에서

* Widget은 build 함수의 리턴 타입이 Widget이라는 의미.
* BuildContext context는 BuildContext 타입의 변수 context를 선언한다는 의미. 꼭 이름이 context가 아니어도 되는데, 관례상 이렇게 쓴다. 부모 위젯에 대한 것, 위젯의 위치에 대한 정보들이 여기에 담긴다.
| // 화면 폭 정보 가져오기
double width = MediaQuery.of(context).size.width;
|-
|MaterialApp
|구글에서 주로 사용하는 디자인 형식이다.
없어도 되지만.. 전체적인 디자인 테마, 페이지 라우트, 따위를 관리하기에 기본적으로 사용한다.
|
|-
|
|
|
|}