본문 바로가기

Flutter

 (18)
[Flutter] Row Column Axis & Alignment Flutter를 통해 UI작업을 할때 많이 사용하는 Row, Column에 대해 간단히 정리해 보겠습니다. 단어의 의미 그대로 Row는 가로행으로 여러 위젯을 배치할 때 사용됩니다. 반대로 Column은 세로열로 여러 위젯을 배치할때 사용을 합니다. 여기서 가장 헷갈리는 부분이 Axis 즉, 축의 의미일 것 같습니다. Flutter 에서는 mainAxis와 crossAxis라는 용어로 사용을 하고 있습니다. 그런데 mainAxis와 crossAxis는 단순히 가로, 세로의 의미가 아닙니다. 주축과 종축으로 구분하여 생각하시면 이해가 쉬울 것 같습니다. Row의 경우에는 가로행이므로 가로방향이 주축, 즉 mainAxis가 됩니다. 반대로 세로는 종축, 즉 crossAxis가 되겠죠. 여기까지는 이해가 어..
[Flutter] Row, Column 컨텐츠 크기에 맞추기 Row, Column 의 경우 기본적으로 mainAxis를 기준으로 화면 전체크기를 차지하도록 되어 있습니다. Row와 Column 위젯의 코드를 보면 mainAxisSize가 max로 되어 있기 때문입니다. MainAxisSize mainAxisSize = MainAxisSize.max 간단한 Column 예제입니다. body: Container( color: Colors.yellow, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('My', style: TextStyle(fontSize: 40),), const SizedBox(height: 20,), Obx(() => Text(bottomIndexC..
[Flutter] Getx Dialog Getx를 통해 많이 사용하는 기능중 하나가 Get.dialog() 입니다. Flutter에서 material의 기능 중 showDialog를 통해 dialog를 만들 수 있지만, 제 생각에는 2가지 단점이 있는 것 같습니다. 1. 너무 안드로이드스러운 UI로 인해 iOS앱에서는 뭔가 어색해 보입니다. 아이폰에서 안드로이드를 사용하는 듯한 느낌이 들죠. 2. 1번과 연결되는 내용이지만 customizing한 dialog를 만들기 어려운 단점이 있습니다. 앱의 기능에 따라 본인만의 dialog가 필요한 경우가 있기 때문이죠. Getx를 통한 다이얼로그는 아래 코드로 간단하게 다이얼로그를 띄울 수 있습니다. Get.dialog( const Dialog( child: Text('Getx Dialog'), ) ..
[Flutter] Debug Mode Banner 없애기 에뮬레이터 또는 폰에서 디버그 모드로 실행때 우상단에 Debug mode banner 가 있습니다. 개발중일 때는 상관없지만 스크린샷을 찍거나 할때는 신경쓰이는 부분이죠. 이 배너는 없애는 방법은 MaterialApp 또는 GetMaterialApp 의 debugShowCheckedModeBanner 속성을 false 로 변경해주시면 됩니다. return GetMaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', initialBinding: InitBinding(), initialRoute: '/', getPages: [ GetPage(name: '/', page: () => const Home()), GetPage(name: '/..
[Flutter] Getx Route Management Getx를 사용하면 보다 직관적인 Route 를 관리할 수 있습니다. 오늘은 많이 사용하는 Getx Route Management 에 대해서 정리해 보겠습니다. Getx 라우트는 동일 기능을 2가지 방법으로 제공하고 있습니다. 1. 다음 라우트를 클래스명을 지정하는 방법 2. 이름있는 라우트를 통한 방법 : Named를 포함하는 함수명을 사용합니다. 많이 사용하는 라우트 방법을 정리하면 다음과 같습니다. ○ Get.to() & Get.toNamed() - 단순하게 가장 많이 사용하는 다음페이지로 이동 ○ Get.back() - 현재 페이지에서 뒤로 가기 ○ Get.until() - 특정 조건이 만족될까지 뒤로 가기 ○ Get.off() & Get.offNamed - Current route를 삭제하고 지..
[Flutter] Getx 상태관리(3) - bottonNavigationBar+initialBinding 실제 앱에서 사용할만한 상태관리 예제로 Scaffold 의 bottonNavigationBar 의 인덱스를 전역에서 사용하는 예제를 만들어 보려고 합니다. 요즘 앱에서 많이 사용하는 bottonNavigationBar 의 형태를 Flutter 에서는 Scaffold를 통해서 간단히 만들 수 있습니다. 이제 bottom navigation bar 가 있는 앱을 만들어 보겠습니다. 역시나 저는 MaterialApp 대신에 Getx의 기능을 사용하기 위해 GetMaterialApp으로 시작해 보겠습니다. class _MyHomePageState extends State { @override Widget build(BuildContext context) { return GetMaterialApp( title: ..
[Flutter] Getx 상태관리(2) Get.find() 지난 예제를 통해서 Flutter 의 기본 프로그램인 더하기 프로그램을 Getx 를 통해서 변경해 보았습니다. https://alsmaker.tistory.com/33 [Flutter] GetX 상태관리(1) - GetxController, Get.put() Flutter 에서 GetX 패키지는 이제 정말 없어서 안될 패키지인것 같습니다. GetX에서 가장 많이 사용하는 기능은 크게 상태관리와 Routing일 것 같습니다. GetX 에 대한 자세한 정보는 아래 링크에서 보시 alsmaker.tistory.com 하지만 단일 페이지의 프로그램은 존재할 수가 없겠죠. 이제 단일 페이지가 아니라 Routing 을 통해서 다른 페이지로 이동하는 경우에 사용했던 Controller 를 어떻게 활용할지 알아보겠습니..
[Flutter] Container - decoration Container의 decoration 속성중에 많이 사용하는 속성들을 살펴보겠습니다. UI 디자인을 위해 가장 많이 사용되는 내용들입니다. 1) Container의 색상 또는 border 의 색상변경(border) 2) 모서리를 둥글게 변경(borderRadius) child: Row( children: [ Container( margin: const EdgeInsets.fromLTRB(15, 0, 10, 0), // 왼쪽과 오른쪽 15, 10 margin padding: const EdgeInsets.all(10), // left, right, top, bottom 10 margin child: const Text('SAMSUNG', style: TextStyle(fontSize: 20),), dec..

티스토리툴바