개발(합니다)/Flutter&android&ios (27) 썸네일형 리스트형 [flutter-10] Navigator : MaterialPageroute, initialRoute MaterialPageroute 1. Router 개념 단순히 스마트폰에서 보이는 하나의 페이지나 화면을 의미합니다. 2. Navigator의 정의와 push, pop 함수, stack 자료 구조 Navigator의 정의는 모든 앱 페이지를 스택 자료 구조로 Route 객체를 관리하고 있는 기능입니다. Stack은 어떤 물건을 쌓아 올린다는 개념으로 LIFO 후입선출의 자료구조로 나중에 들어온걸 먼저 내보냅니다. 최초 페이지 위에 다음 페이지가 쌓이고 다음 페이지 위에 다다음 페이지가 쌓이는 형태입니다. push : 데이터를 쌓는 기능 pop : 데이터를 내보내는 기능 3. MaterialPageroute 위젯과 context return 하는 모든 Scaffold와 같은 위젯이 Router라고 볼 수 .. [flutter-09] 컨테이너 위젯과 Column, Row 컨테이너 위젯 레이아웃의 Single-child layout widgets 일종입니다. 컨테이너 위젯은 자식(child)가 없는 경우에는 페이지 내에서 가능한 최대한의 공간을 차지합니다. 컨테이너의 색상을 red로 설정했더니 화면 전체가 red가 됨을 볼 수 있습니다. import 'package:flutter/material.dart'; main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.blue, body: Container( color: Color.. [flutter-08] SnackBar와 Toast message 1. 빌더 없이 SnackBar 구현 MyApp의 build -> MySnackBar의 build로 context가 2개 생성되어 Scaffold.of가 불러 낼 위치의 정보를 정확히 찾을 수 있습니다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("SnackBar"), centerTitle: true, ), body: MySnackBar(), ) ); } }.. [flutter-07] buildContext와 SnackBar buildContext란 공식 문서에는 2가지로 설명하고 있습니다. flutter 공식 문서에서는 widget tree에서 현재 widget의 위치를 알 수 있는 정보라고 설명합니다. flutter는 함수를 항상 가지고 이를 가지고 widget이라는 계층 구조를 만들어갑니다. // 함수의 기본 형태 int addNumber(int a, int b) { return a + b; } class MyClass extends StatelessWidget { class MyCard extends StatelessWidget { @override Widget build(BuildContext context) { // 빌드 메서드에 들어오는 BuildContext 라는 인자 값 대입한 Scaffold라는 위젯을 리턴.. [flutter-06] AppBar에 메뉴 아이콘 추가와 Drawer 메뉴 만들기 기본적으로 제공하는 아이콘 다루기 import 'package:flutter/material.dart'; import 'package:week2_app/main.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'AppBar', theme: ThemeData(primarySwatch: Colors.red), home: MyPage(), ); } } class MyPage extends StatelessWidget { @override Widget build(BuildContext cont.. [flutter-05] 클래스와 위젯 클래스와 위젯의 관계 스마트폰을 만들기 위해서는 설계도에 근거해서 제품을 만들어야 합니다. 설계도에는 어떤 부품과 어떤 기능을 담당하는지 명시되어야 되어야 합니다. 설계도를 기반으로 생산한 스마트폰은 각각 사용자에 따라 유심도 달라지고 통신사나 설치되는 앱도 달라지며 고유한 시리얼 번호를 가지게 되면서 같은 설계도에서 만들어진 스마트폰이지만 사용 용도나 고유 번호는 개별적으로 구분됩니다. 다트에서는 설계도를 클래스라고 하며 생산된 개인의 스마트폰을 인스턴스라고 합니다. 프로그래밍에서 클래스 : 객체가 가져야 하는 속성과 기능을 정의한 내용을 담고 있는 설계도 역할 프로그래밍에서 객체 : 클래스가 정의된 후 메모리상에서 할당되었을 때 이를 객체라고 함 프로그래밍에서 인스턴스 : 클래스 기반으로 생성 되고 .. [flutter-04] 기본적인 소개 앱 만들기 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Yong', home: Grade(), ); } } class Grade extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold.. [flutter-03] 기본 코드 이해하기 1. Flutter 프로젝트 폴더의 구성 pubspec.yaml : 앱을 만들 때 필요한 기능 및 의존성을 관리하는 파일 android, ios 폴더 : 앱에 맞게 변환시켜 주는 폴더 test 폴더 : 테스트 코드를 작성하기 위한 폴더 lib 폴더 : dart 파일이 위치한 폴더로 모든 소스는 이 폴더에서 작동 2. 코드 기본 내용 이해하기 / 앱 페이지 기본 구성 공식화 해보기 import 'package:flutter/material.dart'; : 구글에서 정의 한 디자인 가이드라인이 들어 있는 라이브러리입니다. void main() => runApp(MyApp()); : 기본적으로 실행하기 위해 꼭 필요한 runApp(커스텀 args)가 필요합니다. 위젯 트리의 첫 번째에 위치해 있습니다. cla.. 이전 1 2 3 4 다음
