짱구

들어가기 앞서... 외부 패키지를 사용하는 방법을 알아볼 것이다. 리액트에서 개발한것과 같이 편리하게 만들어 놓은 외부 라이브러리를 가져와 쓴다 라고 생각하면된다. 출처 : 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. 프로젝트에 이미지 넣기! 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() 으로 적..

들어가기 앞서... 이번 게시글에는 저번 작업물에서 상태관리한것을 최상위로 올릴것이다. 최상위로 올려야하는 이유는 데이터 관리 하는 것이 여러 군데로 나눠져있으면 데이터의 흐름도를 보기가 굉장히 힘들어지고, 수정을 하려고하면 어디에서 어떤데이터를 다루는 지 찾아야하는게 힘들어진다. 즉 코드관리가 어려워진다. 그래서 우리가 상태관리를 모든 위젯들이 속해있는 최상위 트리인 HomeScreen 클래스로 관리를 해주면 우리가 데이터를 보내주기 쉽다. 만약 데이터 관리해주는게 많아지면 StatefulWidget 만으로는 힘들어진다. 나중에는 상태관리 툴을 사용할 것이다. 1. 주의 깊게 봐야하는 점... 상태관리는 상위 위젯에서 한번에 관리 해주는 것이 가독성이 좋고 코드 추가, 수정에도 용이하다. Statef..

들어가기 앞서... 이전 게시글에는 단일 컨테이너만을 사용해서 플러터 앱을 실행을 했는데, 복수 위젯을 담는 컨테이너를 작성해줄 예정이다. 1. 주의 깊게 봐야하는 점... Column (열, 세로축) Row (행, 가로축) Wrap (childerne 의 공간이 부족해지면, 자동으로 다음줄로 바꿔준다.) Stack (children 의 위젯들을 겹쳐서 출력한다) 본문으로... 1. Column 실습! body: Column( children: [ Container( color: Colors.red, width: 150, height: 300, child: const Text( '1', ), ), Container( color: Colors.yellow, width: 150, height: 300, ch..

들어가기 앞서... 패스트 캠프에서 코딩 왕초보를 위한 앱 만들기 풀패키지 강의를 들으며 정리하는 게시글이다~ 우선은 초급자가 접근하기 쉬운 강의를 선택하기로 했다! 앱 레퍼런스 페이지 https://fnd.io/#/kr/search?mediaType=all&term=%EC%95%BD fnd Experience the App Store and iTunes Anywhere fnd.io 본문으로... padding 과 margin을 공부해보자! 기본적으로 HomeScreen 클래스를 만들고 작업을 해주자! padding과 margin을 적용해준 코드의 모습이다! import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget {..

들어가기 앞서... 날짜 데이터를 관리하는 DateTime 을 사용해보겠다! 본문으로... 우선은 날짜를 변경해줘야하는 부분을 확인하자! 하트 아이콘을 클릭해서 나오는 날짜 DatePicker 에서 클릭을 하게되면, 앱 화면에서 바뀌어야하는 부분이 바로, 사진속의 날짜 부분과 Deday 부분이다. 현재 SatelessWidget 으로 작성이 되어있는 _TopPart 클래스를 StatefulWidget 으로 변경을 해보자! 커맨드를 사용해서 convert to StatefulWidget 을 해준다. 그리고 State 클래스에 DateTime.now() 현재시간을 selectedDate 라는 이름의 변수로 저장을 해두고, DatePicker 로 선택을하면 초기화해서 값을 넣어주는 방법으로 진행을 할 것이다!..

들어가기 앞서... 이번 게시글에는 하트 버튼을 누르면 처음 만난 날을 입력할 수 있는 다이얼로그를 만들것이다. 본문으로... import 되어 있는 부분을 설명하겠다! 이번에 DatePicker 를 사용하면 자동적으로 import 가 되는 것을 볼 수 있는데, cupertino.dart 는 Ios 디자인 관련해서 사용할 때 import 하는 package 이고, material.dart 는 Andorid 디자인 관련해서 사용할 떄 import 하는 package 이다. showCupertinaoDialog() 을 사용하면 우리가 버튼을 클릭 했을때, 다이얼로그가 나오는 위젯이다. builder 에는 build 함수마냥 작성을 해주면 된다. import 'package:flutter/cupertino.d..