Flutter (156) 썸네일형 리스트형 [Flutter] Firebase, FireStore 정리 다른 블로그에서 잘 정리된 사항이 있어서 링크만 추가합니다. https://funncy.github.io/flutter/2021/03/06/firestore/ [Flutter] - Firebase FireStore 총정리 Flutter에서 FireStore 사용했던 내용을 기록하였다. funncy.github.io [Flutter] Theme - ThemeData main build 전체 폰트 적용 - fontFamily: 'Dohyeon' headline3 만 적용 - TextStyle(fontFamily: 'Dohyeon') 모든 button 의 텍스트 색상 적용 - button: TextStyle(color: Colors.white) class AppleApp extends StatelessWidget { const AppleApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp.router( theme: ThemeData( primarySwatch: Colors.red, // fontFamily: 'Dohyeon', textTheme.. [Flutter] Widgets - ListView.builder + Card build 할때 ListView.builder 를 사용하는 샘플과 Card 위젯을 동시에 사용하는 간단한 샘플입니다. Card의 옵션으로는 elevation, shape 를 사용한 샘플입니다. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( centerTitle: true, title: const Text('This is the Kimchi Recipes App'), ), body: ListView.builder( itemBuilder: (context, index){ return buildRecipeCard(recipes[index]); }, itemCount: recipes.length, ) ); } Wid.. [Flutter] Widgets(4) - 재사용 가능한 팝업창 만들기 일반적인 경고창을 만들고 필요한 화면에서 호출가능하고, 재사용 가능하다. 팝업창의 입력값에 따라 다른 처리도 가능하다. class WarningYesNo extends StatelessWidget { final title; final msg; final YesMsg; final NoMsg; WarningYesNo({required this.title, required this.msg, required this.YesMsg, required this.NoMsg}); @override Widget build(BuildContext context) { return AlertDialog( title: Text(title, textAlign: TextAlign.center, ), content: Text(msg,.. [Flutter] Widgets(3) - Custom Widget 이전 블로그에서는 함수처럼 적용한 경우였고, 이번에는 조금 복잡한 경우로 클래스로 적용한 경우의 샘플입니다. 드롭다운 메뉴를 화면마다 동일하게 처리할수도 있고, 클래스로 처리하여 중복코드를 제거할 수도 있다. 기능적인 차이로, 드롭다운 메뉴를 재사용할 수 없는 경우입니다. 다음 블로그에서 재사용 가능한 위젯의 샘플을 만들어 보겠습니다. 아래 소스코드는 Getx 컨드롤러에 대한 설명부분은 생략하였습니다. // dropdown_button_controller.dart // 언어 설정 class DropdownButtonLangType extends StatelessWidget { final DropdownButtonController _dropdownButtonController = Get.put(Dropd.. [Flutter] Widgets(2) - Custom decoration 자주 사용하는 decoration 이 있다면 이런 부분을 함수처럼 처리하여 반복적으로 사용 가능하다. // input_decoration.dart InputDecoration buildInputDecoration({String? label, String? hintText}) { return InputDecoration( fillColor: Colors.white, focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: BorderSide(color: Colors.blue)), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(16.. [Flutter] Widgets(1) - bottomNavigationBar with Getx 오늘은 bottomNavigationBar 를 Getx 로 구현하는 예제 입니다. 1. app.dart 수정 2. tab_page_controller.dart 추가 3. tab_page.dart 추가 1. app.dart 수정 app.dart 에서는 더이상 화면을 보여줄 필요가 없이 로그인 성공시, bottomNavigationBar 화면인 tabPage 로 바로 이동하게 수정하였음. import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:sns_login/src/controller/login_user_control.. [Flutter] Design Pattern(2) - Controller with Getx 지난 번에 만든 모델을 사용하는 controller 에 대한 예제 코드입니다. login_user_controller.dart import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:sns_login/src/model/login_user.dart'; // 모델링 패턴 파일 class LoginUserController extends GetxController { static LoginUserController get to => Get.find(); // Get.find 사용방법을 줄여주는 선언, 별칭임 fin.. 이전 1 ··· 14 15 16 17 18 19 20 다음
