YumeHANA YUME'S DEV

화면 하단 팝업을 구현하기 위해showModalBottomSheet 기능을 사용 SizeBox 위젯을 따로 만들어 추가 버튼 쪽을 따로 구현SizedBox AddChildList() { return SizedBox( width: double.infinity, child: GestureDetector( onTap: () { showModalBottomSheet( context: context, builder: (context) => BottomModal()); }, child: Container( padding: EdgeInsets.symmetric(vertica..

ExpansionTile을 이용하다보니divider가 색이있고,또한 부모로 Container를 두었을때 border가 있다면 클릭하면 물결 효과가 사각형으로 나와서 이상하게 나온다. 처음에는 ExpansionTile에 Padding을 강제로 주어서 Container안에 넣어 안보이게 처리했지만ThemeData에 splashColor와 highlightColor의 색상만 변경해주면 되는 것 찾게 되었다. splashColor : 터치가 발생한 곳에서 시작하여 퍼지는 효과highlightColor : 위젯 전체로 물결 효과기존에 이렇게 썻던것을 ThemeData로 묶어서 사용data: Theme.of(context).copyWith(dividerColor: Colors.transparent),CustomCo..

확장 리스트를 만들기 위해ExpansionTile을 이용누르면 리스트가 확장되고 접히는 기능을 구현 text가 다크테마에 적용되도록 style적용기존에 child는 title, subTitle로 구성되어있어서Row를 주어 한 줄로 표시 이후 spaceBetween으로 양 사이드에 위치하도록 적용 bool _isExpanded = false; @override Widget build(BuildContext context) { return ExpansionTile( title: Text('Item 1',style: TextStyle(color: textColor)), children: [ Padding( padding: EdgeInsets.all(16...

다크모드 설정을 만들었으니 이제 유지 시켜주기위해서캐시저장 방식중 SharedPreferences를 사용InstallationSharedPreferences를 위해 cocoaPod 설치https://yumedev.tistory.com/12 [ MacOS ] Flutter CocoaPod 설치캐시 저장 방식을 구현하는데shared_preferences: ^2.0.10 shared_preferences를 사용할려면 cocoaPod를 설치해야 캐시 저장 방식을 구현할 수 있다.시뮬레이터에서 캐시저장을 구현하는데 cocoaPod이 없어서 계yumedev.tistory.comDependenciesshared_preferences: ^2.0.10SharedPreferences다크모드 스위치가 값이 바뀔때마다 pro..

스위치를 만들어 다크 모드 설정 구현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..