YumeHANA YUME'S DEV

스위치를 만들어 다크 모드 설정 구현Color Setting다크모드일때와 라이트모드일때 적용할 컬러를 세팅해준다.색상은 테마에 따라서 색상을 바꾸기위해서 final 변수가 아닌 일반 변수로 설정해준다./* GLOBAL COLOR */Color bgColor = bgLightColor;Color boxColor = boxLightColor;Color textColor = darkGrey;Color iconColor = darkGrey;/* LIGHT THEME COLOR */final Color bgLightColor = hexToColor('f2f4f6');final Color boxLightColor = hexToColor('ffffff');/* DARK THEME COLOR */final Color..

BottomNavigation 에서 탭을 누르면 페이지 이동을 구현CallBack Function페이지 이동을 위해콜백함수 ValueChanged onItemTapped 함수를 추가콜백함수는 값이 변경될때마다 콜백함수를 호출하여 부모에게 값을 전달class BottomNavigation extends StatefulWidget { final int selectedBtn; final ValueChanged onItemTapped; const BottomNavigation({super.key, required this.selectedBtn, required this.onItemTapped}); @override State createState() => _BottomNavigation();}  탭을 ..

Flutter에서 Color의 재사용성을 높이기 위해서Color를 관리하는 파일을 만들어서 사용하기로 함 colors.dart 파일을 만듦import 'package:flutter/cupertino.dart';Color hexToColor(String hexString) { final buffer = StringBuffer(); buffer.write('ff'); // 알파 채널 값 추가 buffer.write(hexString); return Color(int.parse(buffer.toString(), radix: 16)); // 16진수로 변환하여 Color 객체 생성}final Color white = hexToColor('ffffff');final Color bgColor = hexToC..

https://flutterawesome.com/flutter-animated-navigation-bar/ Flutter Animated Navigation BarFlutter Animated Navigation Barflutterawesome.com일반적인 네비게이션 바 기능 보다는 애니메이션이 있는 네비게이션 바를 구현해보고 싶어서git 코드를 보며 기능을 구현해보았다.우선 navigation bar 파일을 만들어서 네비게이션을 구성git 코드를 보며 내 생각대로 조금 수정class BottomNavigation extends StatefulWidget { @override State createState() => _BottomNavigation();}class _BottomNavigation e..

가운데 타이틀을 넣고 우측 하단에 버튼을 만드는 레이아웃 설정하기Layout영역 레이아웃 설계 Padding( padding: const EdgeInsets.all(16.0), child: Container( height: 120, decoration: buildDecoration(), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('타이틀'), Container( margin: EdgeInsets.from..

각기존에 Calendar에 marker를 넣을려면 CalendarStyle에서 marker의 style을 직접 줘야했지만,TextMarker의 경우에는 CalendarStyle에서 주는것이 아닌 markerBuilder를 활용해서 넣어주어야한다. MarkerTextBuilder기존의 CalendarBuildersdptj markerBuilder속성을 추가calendarBuilders: CalendarBuilders( outsideBuilder: BuildOutSideDay, defaultBuilder: BuildDefaultDay, selectedBuilder: BuildSelectedDay, todayBuilder: BuildToday, ..

headerStylehttps://pub.dev/documentation/table_calendar/latest/table_calendar/HeaderStyle/HeaderStyle.html HeaderStyle constructor - HeaderStyle - table_calendar library - Dart APIHeaderStyle constructor const HeaderStyle({ bool titleCentered = false, bool formatButtonVisible = true, bool formatButtonShowsNext = true, TextFormatter? titleTextFormatter, TextStyle titleTextStyle = const TextStyle(..

https://pub.dev/documentation/table_calendar/latest/ table_calendar - Dart API docsTableCalendar Highly customizable, feature-packed calendar widget for Flutter. Features Extensive, yet easy to use API Preconfigured UI with customizable styling Custom selective builders for unlimited UI design Locale support Range selection support Multipub.devInstallationpubspec.yaml 파일에 dependencies 추가dependen..