나만의 개발 블로그

🙆‍♂️ 다중 페이지 이동 먼저 코드들을 확인해보겠습니다. 🪐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..

🙆‍♂️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를 찾을 ..

🙆‍♂️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는 구분선의 굵..

🙆‍♂️VS Code에서 플러터 프로젝트 생성 1. 먼저 VSCode에서 플러터 확장프로그램을 설치합니다. 2. 보기(View) > 명령 팔레트(Command) 클릭 or Ctrl+Shift+P 하기 3. Flutter: New Project 입력하기 (저는 사용했었어서 최근에 사용한 항목으로 자동 완성해서 나오네요.) 4. Application 5. 저장할 폴더 선택 6. 플러터 프로젝트 명 짓기 (대문자, 특수문자 안된다네요..) 끝

🚀AVD 설치 Adroid Studio에서 Tools탭 > Device Manager 클릭 Device Manager에서 Virtual부분에서 Create device 클릭 원하는 핸드폰 모양 고르고 Next 원하는 시스템 이미지파일을 다운로드 할 수 있습니다. 저는 Pie를 다운로드 했습니다. 다되면 Finish 설치한 이미지 파일 선택 후 Next Finish!!!

🙆‍♂️ListView 세로로 무언가를 배치하고 싶을 때 Column 위젯을 사용하는데 너무 많아서 스크롤바가 필요하다면 ListView위젯을 사용하면 됩니다. 이처럼 Column 위젯 안에 Text 위젯을 많이 넣으면 스크롤이 생기지 않고 너무 많이 넣었다고 오류가 나는데 Column 대신 ListView를 사용하면 오류는 없어지고 스크롤 바가 생겨서 올라갔다 내려갈 수 있게 됐습니다. 또 다른 장점으로는 스크롤 위치 감시도 가능하고 메모리도 절약할 수 있다고 합니다! 쇼핑몰, SNS등 모두 ListView를 만듭니다.

🙆‍♂️커스텀 위젯 위젯을 구성할 때 너무 코드가 길어지면 보기 힘드니 커스텀 위젯을 사용합니다. 🚀사용법 1. 정의된 코드 바깥에 stless를 치고 탭을 누릅니다. 2. 클래스를 원하는 이름으로 작명합니다. 3. return 옆에 사용할 코드들을 작성하면 됩니다. 이렇게 SizedBox로 긴 코드가 있다고 가정을 합니다. 마지막으로 4.이 커스텀 위젯을 body부분에 붙여넣으면! 신기하게도 잘 나오는 모습입니다. 이렇게 안하고 변수에 넣을 수도 있지만 값이 변하는 위젯이라면 오류가 생길 수 있습니다.

🙆‍♂️Flexible Flexible 위젯으로 감싸면 안에 있는 위젯은 크기를 %로 표현할 수 있습니다. 🚀flex Flexible 위젯으로 감싸고 child 속성 다음으로 flex 속성을 사용해서 비율로 크기를 나타낼 수 있습니다. 이렇게 같은 수로 비율을 주게된다면 5 5로 주지 않아도 반으로 나뉘게 됩니다. 컨테이너가 3개가 있어도 같습니다. 이렇게 3개로 해도 동일한 비율이면 1:1:1로 나오는 모습입니다. 그리고 이는 Row 위젯 안에서만 아니라 Column위젯에서도 동일하게 동작합니다. 🙋‍♂️Expanded Expanded는 Flexible의 flex값이 혼자 1로 되어있다고 생각할 수 있습니다. 이렇게 꽉채우는데 다른 요소 중에 크기 지정된 부분이 있다면 그 부분을 제외하고 꽉채웁니다.