짱구

들어가기 앞서... 레이아웃을 만들어 보겠다. 1. 미리보기 본문으로... 1. 레이아웃 만들기! 1) 생성하기! 버튼의 크기를 가로 사이즈의 최대로 먹게 해주자! SizedBox 위젯을 사용할 것이다. ElevatedButton 버튼의 크기를 크게 만드는 방법은 여러가지 방법이 있을 수 있다. // 1) Container 사용 Container(width: double.infinity, child: ElevatedButton()) // 2) SizedBox 사용 SizedBox(width: double.infinity, child: ElevatedButton()) 풍기는 뉘앙스가 중요하다! Container 는 패딩, 마진, 높이, 길이, 생상 여러가지 매개변수를 넣을 수 있어, 여러가지가 가능한 뉘앙..

들어가기 앞서... 아주 간단한 실습으로 const 에 대해서 알아볼 예정이다. 본문으로... 1. 기본적으로 세팅! 간단하게 버튼 하나 만들었다. build 라는 버튼을 클릭하면 TestWidget() 의 print 함수 가 const 의 유무에 따라 어떻게 찍히는 지 확인 해보자! void main() { runApp( MaterialApp( home: ConstructorPage(), ) ); } import 'package:flutter/material.dart'; class ConstructorPage extends StatefulWidget { const ConstructorPage({Key? key}) : super(key: key); @override State createState() =..

들어가기 앞서... 데이터 베이스 이해하기 1. 주의 깊게 봐야하는 점... 2. 간단한 설명으로는... 본문으로... 1. InputForm 클래스를 만들어서 매개변수를 정해주자! class InputForm { InputForm({ required this.name, required this.age, }); String name; int age; } 2. StatefulWidget과 Textfile 를 사용해서 이름과 나이를 입력할 폼을 만들어주자! body: Column( children: [ Column( children: [ TextField( controller: nameController, decoration: const InputDecoration(label: Text('name')), )..

들어가기 앞서... 외부 패키지를 사용해서 앱내 알림을 띄우는 방법을 알아볼 것이다. 앱내 알림 하는 방법은 크개 두가지가 있다. 1. Cloud push message 관리자가 다수의 인원한테 메세지를 보낼때 클라우드를 통해서 보내는 것 2. Local alarm message 앱 자체에서 발송 시간, 발송 메세지를 알고 있고, 자체적으로 메세지를 보내는것 3. 차이점 클라우드 측에서 관리자가 발송한 메세지냐 ? vs 앱 자체에서 보냈고, 시간 및 내용을 알 수 있는 메세지냐 ? 출처 : https://pub.dev/packages/flutter_local_notifications flutter_local_notifications | Flutter Package A cross platform plugi..

들어가기 앞서... 외부 패키지를 사용하는 방법을 알아볼 것이다. 리액트에서 개발한것과 같이 편리하게 만들어 놓은 외부 라이브러리를 가져와 쓴다 라고 생각하면된다. 출처 : https://flutter-ko.dev/docs/development/packages-and-plugins/using-packages 패키지 사용하기 Flutter 앱에서 패키지를 사용하는 방법을 학습합니다. flutter-ko.dev 본문으로... 1. 패키지는 pub.dev 에 있다! https://pub.dev/ Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for ..

중요도 이름 주소 ⭐️⭐️⭐️ 플러터 공식 문서 https://docs.flutter.dev/ ⭐️⭐️⭐️ dart 공식문서 https://dart.dev/guides ⭐️⭐️⭐️ dart 문법 권장하는 디자인 가이드 https://dart.dev/guides/language/effective-dart/design ⭐️⭐️⭐️ 온라인 dart 편집기 https://dartpad.dartlang.org/? ⭐️⭐️⭐️ 플러터 패키지 https://pub.dev/flutter/packages ⭐️⭐️ flutter 일반적인 이슈 해결 https://docs.flutter.dev/cookbook ⭐️⭐️ 위젯 확인 및 코드 변환 https://flutterstudio.app/ ⭐️⭐️ 플러터 갤러리 (위젯, ..

들어가기 앞서... 플러터 앱에서 버튼을 클릭해 화면 전환 하는 것을 알아 볼 것이다. 본문으로... 1. AppBar! 앱바는 도구 모음과 잠재적으로 TabBar 및 FlexibleSpaceBar 와 같은 기타 위젯으로 leading : 이 위젯은 제목 앞에 표시할 위젯이다. title : 제목 위젯 으로, 한줄로 표시할 위젯 목록이다. actions : 이 위젯은 제목 위젯 뒤에 위치하며, 한 줄로 표시될 위젯리스트 이다. flexibleSpace : 이 위젯은 도구 모음과 탭 표시줄 뒤에 쌓입니다. 높이는 앱 바의 전체 높이와 동일하다. bottom : 이 위젯은 앱 하단에 표시된다. 2. placeholder 개발중에 인터페이스가 아직 개발 되지않음을 나타낸다, 이 자리에 무엇이 들어갈것을 알려주..

들어가기 앞서... 이미지를 프로젝트에 등록하고, 이미지 위젯들을 사용해서 출력하는 방법을 알아볼것이다. 본문으로... 1. 프로젝트에 이미지 넣기! 1) 이미지를 root 폴더내에 assets/Image 폴더를 만들어 이미지를 추가해준다. 2) pubspec.yaml 파일에 assets 경로 설정해주자! AndroidStudio 에는 pub get 버튼을 눌러야하지만, visual studio code 에서는 그냥 저장만 하면 된다. 2. Image.assets() 추가! body: Column( children: [ Image.asset('assets/image/panda.jpeg'), Image.asset('assets/image/120430f.gif'), ], ), 이미지의 영역이 넘어가서 에러표..

들어가기 앞서... 기본적인 상태관리를 진행할 것이다. 그리고 추가적으로 조건문과 스타일링을 추가해주도록 하겠다. 플로팅 버튼을 만들어 초기화 하는 기능도 만들어보겠다 1. 주의 깊게 봐야하는 점... StatefulWidget FloatingActionButton 본문으로... 1. Stateless 로 해보자! class StatefulWidgetPage extends StatelessWidget { StatefulWidgetPage({super.key}); int count = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('ElevatedButton study'),..

들어가기 앞서... 이번 게시글에는 테마를 적용해볼 것이다. main.dart 페이지에서 글꼴들을 테마로 분리해서 적용해볼 예정이다! 나중에 material.dart 에서 제공하는것들도 테마로 분리해서 적용해보자! 본문으로... 1. main.dart 에서 theme 를 추가 해보자! 기본적인 theme () 이다. void main() { runApp(MaterialApp( theme: ThemeData( TextTheme: TextTheme() ), home: HomeScreen(), )) } TextTheme() 안에 여러가지 파라미터를 넣을 수 있다. 확인해보려면, Go to Declaration or Usages 를 봐보자! 1) home_screen.dart 에서 TextStyle() 으로 적..