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..

저는 기본 시스템컬러가 아니라 디자인 가이드에 따른 컬러를 사용할 예정이기 때문에 다크모드를 커스텀해서 사용하려고합니다. 먼저 색상을 정의하겠습니다. Colors.dart라는 파일을 하나 생성해서 LightColors 클래스와 DarkColors 클래스를 만들어주었습니다. 상수값이고 전역적으로 접근해야할 클래스는 멤버를 static const로 작성해줍니다. ㄴ static으로 선언했기 때문에 인스턴스화없이 접근할 수 있고 const로 정적바인딩 되므로 런타임에서 값을 변경할 수 없어 안전합니다. 이 작업은 디자인 가이드에 붙은 컬러 이름을 사용하기 위해 작성한 것이고 건너뛰어도 무방합니다. 추가적으로 색상값을 지정할땐 알파값까지 지정하는 것을 추천드립니다. // Colors.dart import 'pa..

SwiftUI에서 Data Binding에 쓰이는 어노테이션들을 정리해보았습니다. @State 같은 struct 내에서만 접근 가능 struct ParenttView: View { @State var state: Int = 0 var body: some View { VStack { ChildView(state: $state) } } } @Binding 다른 struct의 State 참조 가능 부모 뷰에 @State 변수를 생성해주고 자식 뷰에는 @Binding 변수를 생성해준 후 자식 뷰 인스턴스의 파라미터로 State 변수를 전달해 주면 됩니다. struct ParenttView: View { @State var state: Int = 0 var body: some View { VStack { Chi..

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(), ); } } 그 다음 테마를 변경할 버튼을 하나 만들어보겠습니..