나만의 개발 블로그

🙆‍♂️문제 코드 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( home: Center( child: ElevatedButton( child: Text("Go to ScreenA"), onPressed: ()=>Navigator.push(context, MaterialPageRoute( builder: (context) => ScreenA() ) ), ), )..

🙆‍♂️오류 플러터를 사용하다보면 이렇게 Navigator 에러가 나옵니다. 그 이유는 현재 받아온 context에서 ScreenA를 찾을 수 없기 때문입니다. 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( home: Center( child: ElevatedButton( child: Text("Go to ScreenA"), onPressed: () { Nav..

🙆‍♂️ 다중 페이지 이동 먼저 코드들을 확인해보겠습니다. 🪐main.dart import 'package:flutter/material.dart'; import 'package:flutter_application_1/ScreenA.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({ Key? key }) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: ScreenA(), ); } } 🪐ScreenA.dart import 'package:flutter/material.dart'; c..

📋글의 순서 Route의 개념 Navigator의 정의 stack 자료 구조 MaterialPageRoute위젯과 context 페이지 이동 기능 구현 실습 🙆‍♂️Route의 개념 Flutter의 Navigator에서 Route가 뜻하는 것은 " 스마트폰에서 보여지는 하나의 페이지나 화면 " 입니다. 🙋‍♂️Navigator의 정의 Navigator란 모든 페이지를 관리하고 스택구조로 Route들을 관리합니다. Navigator 위젯으로 앱 내에 페이지 이동을 할 수 있습니다. Push와 pop 메소드를 통해서 stack을 관리를 합니다. 🤷‍♂️stack 자료구조 Stack 자료 구조는 Last-in First-out 구조입니다. Push 메소들르 통해서 데이터를 상주시킬 수 있고 Pop 메소드를 통..

🙆‍♂️Toast Message Toast message를 사용하기 위해서는 따로 fluttertoast라는 라이브러리를 import 해야합니다. 그렇기 위해서 먼저 pubspec.yaml 파일로 이동을 한 후 cupertino_icons 밑에 fluttertoast : ^3.1.3을 추가합니다. 그리고 main.dart 파일로 돌아와서 상단에 fluttertoast/fluttertoast.dart 파일을 import 해줍니다. Toast Message를 사용하기 전에 환경을 구성해주고 버튼을 누르면 onPressed 함수를 통해서 Toast Message를 사용할 수 있도록 설정할 것입니다. 밑에 flutterToast라는 함수를 만들어서 onPressed에 사용할 수 있습니다. gravity 속성을 ..

🙆‍♂️SnackBar 사용법 SnackBar는 메시지를 통해 작업에 대한 간단한 피드백을 제공하는 UI 입니다. SnackBar를 사용하려면 Scaffold.of 함수를 사용해서 현재 위치(context)를 참조해서 showSnackBar라는 함수를 사용해서 SnackBar를 그릴 수 있습니다. 🚀Something.of(context) 현재 주어진 context에서 위로 올라가면서 가장 가까운 Something을 찾아서 반환하는 함수입니다. Something에는 Scaffold가 들어갈 수도 있고 Theme가 들어갈 수도 있고 등등 다양하게 들어갈 수 있습니다. 그래서 간단한 버튼을 구현하여 클릭 시 스낵바가 나오도록 하는 기능을 삽입했습니다. 하지만 눌러보면 오류가 나옵니다. Scaffold를 찾을 ..

🙆‍♂️BuildContext 1. BuildContext는 widget tree에서 현재 widget의 위치를 알 수 있는 정보다. 이 명령어에서 볼 수 있듯 build 함수는 Widget 타입이고 context변수는 BuildContext 타입입니다. build 함수에 인자값으로 들어갑니다. 그래서 Scaffold를 return 하는데 BuildContext가 담긴 인자값을 대입해서 해당 위치에 있는 Scaffold 위젯을 반환하는 것입니다. 2. BuildContext는 stateless 위젯이나 state 빌드 메서드에 의해서 리턴 된 위젯의 부모가 된다. 이 상황에서 BuildContext에는 MyPage에 대한 경로 정보가 담겨있는 것입니다.

🙆‍♂️IconButton 먼저 AppBar와 메뉴 IconButton을 만들었습니다. onPressed의 내용을 수정하면 버튼을 눌렀을 때 디버그 콘솔에 텍스트를 눌렀다고 나옵니다. actions 위젯을 이용해서 화면 오른쪽에 아이콘들을 배치했습니다. 버튼 클릭시 텍스트 출력도 잘 됩니다. 🙋‍♂️Drawer drawer메뉴를 사용하기 위해서 먼저 leading 속성의 menu 아이콘 부분을 지워주고 이렇게 drawer : Drawer()를 해주면 menu 아이콘처럼 다시 나오게 됩니다. 버튼을 누르면 이렇게 drawer 메뉴가 나오게 됩니다. 🤷‍♂️UserAccountDrawerHeader UserAccountDrawerHeader 위젯을 통해서 유저 정보를 넣을 수 있습니다. 🚀accountNam..

🙆‍♂️CircleAvatar CircleAvatar 위젯을 사용하면 사진을 동그라미에 넣어서 표현할 수 있습니다. 🚀backgroundImage 이렇게 backgroundImage 속성을 통해서 이미지가 들어간 동그라미를 표현할 수 있습니다. 🚀radius radius 속성을 통해서 이미지의 크기도 키울 수 있습니다. 🙋‍♂️Divider Divider 위젯을 사용하면 구분선을 그릴 수 있습니다. 🚀height Divider의 height 속성은 말그대로 높이 속성인데 전 객체와의 차이라고 생각하셔도 됩니다. height가 110일 때보다 210일 때가 더 많이 띄어져 있습니다. 🚀color color 속성을 이용해서 구분선의 색을 바꿀 수 있습니다. 🚀thickness thickness는 구분선의 굵..

🙆‍♂️main.dart 작성 텅 비어있는 main.dart입니다. 먼저 dart를 import 해줘야 합니다. 🚀import 1. i를 누르고 import ' ';를 소환 2. 작은따옴표 안에 fm을 작성 후 package:flutter/material.dart 를 자동완성 (그냥 입력해도 상관없습니다.) 완성 🚀main() 1. 함수가 끝나면 다른 값을 반환하지 않는다고 main()함수를 void로 선언합니다. 2. fat arrow(=>)를 사용해서 runApp 함수를 호출합니다. 3. runApp()함수는 인자값으로 MyApp()이라는 클래스를 호출해서 실행합니다. 🚀stateless widget 1. stl을 눌러서 Flutter Stateless Widget을 자동완성 되도록 합니다. 이렇게 ..