Dev.dodo

0. 소개 이전에 StatefulWidget으로 만들었던 BottomNavigationBar를 GetX controller를 이용해 만들어보겠습니다. GetX 라이브러리에서는 StatefulWidget 사용을 지양하니 섞어 사용중이시라면 GetX 방식으로 바꾸시는걸 권장드립니다. [Flutter] 하단탭바, BottomNavigationBar 만들기 이거 탭바라고 자주불렀는데, 플러터에선 BottomNavigationBar라고 하네요. 플러터에서 탭바는 상단에 있는 이거라고 합니다. 현재 만들 것은 TabBar가 아닌 BottomNavigationBar 입니다. 시작 1️⃣ BottomNavg.. dokit.tistory.com 이전글 1. GetX Controller 만들기 // BottomNaviga..

Flutter에서 BottomNavigationBar를 커스텀할 수 있는 속성들을 정리해보겠습니다. 1️⃣ 선택된 탭 색상 변경 아이콘과 라벨 색을 변경할 수 있습니다. selectedItemColor: Colors.green, // 선택된 요소 색 unselectedItemColor: Colors.grey, // 선택되지 않은 요소 색 2️⃣ 아이콘/라벨 스타일 변경 아이콘과 라벨의 스타일을 변경할 수 있습니다. 이때, 라벨 텍스트 컬러는 1번의 item 컬러로 적용됩니다. (TextStyle에 color를 지정해주어도 적용되지 않습니다) selectedIconTheme: IconThemeData(color: Colors.green), // 선택된 아이콘 스타일 unselectedIconTheme: I..

이거 탭바라고 자주불렀는데, 플러터에선 BottomNavigationBar라고 하네요. 플러터에서 탭바는 상단에 있는 이거라고 합니다. 현재 만들 것은 TabBar가 아닌 BottomNavigationBar 입니다. 시작 1️⃣ BottomNavgationBar를 이용하기 위해선 StatefulWidget이 필요합니다. 따라서 메인 화면이 될 StatefulWidget을 만들고 루트위젯(MyApp())의 home에 넣어줍니다. // main.dart void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _titl..

[문제코드] class ThemeViewModel extends GetxController{ RxBool isLightTheme = false.obs; void changeTheme() { if (isLightTheme) { Get.changeThemeMode(ThemeMode.dark); isLightTheme = false; // 문제 발생 } else { Get.changeThemeMode(ThemeMode.light); isLightTheme = true; // 문제 발생 } } } [해결] class ThemeViewModel extends GetxController{ RxBool isLightTheme = false.obs; void changeTheme() { if (isLightTheme...

Flutter 기본 폰트가 너무 별로네요.. 전체 폰트를 변경해보겠습니다. 세팅 1️⃣ 최상위 폴더에 assets 폴더를 만들고 그 안에 fonts 폴더를 만든 다음 사용할 폰트들을 그대로 넣어줍니다. 2️⃣ 그 다음 pubspec.yaml 파일에서 주석처리된 fonts: 를 찾아 주석을 해제하고 다음과 같이 설정해줍니다. fonts: - family: Pretendard fonts: - asset: assets/fonts/Pretendard-Thin.ttf weight: 100 - asset: assets/fonts/Pretendard-ExtraLight.ttf weight: 200 - asset: assets/fonts/Pretendard-Light.ttf weight: 300 - asset: as..

GetX를 사용하면 다크모드 변경 자체는 매우 간단합니다. 먼저 main.dart > MyApp 부분에 theme와 darkTheme를 추가해줍니다. import 'package:get/get.dart'; class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData(), darkTheme: ThemeData.dark(), home: const MyHomePage(), ); } } 그 다음 테마를 변경할 버튼을 하나 만들어보겠습니..