Flutter

Flutter/Issue

플러터 웹 아파치 배포 방법

플러터 웹 아파치 배포 방법 깃허브나 파이어베이스 등에서 배포하는 것이 일반적이지만, 나의 경우 내부망에서만 열람이 가능한 웹 페이지를 배포해야 했기 때문에 아파치를 이용하는 방법을 선택했다. 먼저 아파치를 설치한다. https://inpa.tistory.com/entry/APACHE-%F0%9F%8C%90-%EC%95%84%ED%8C%8C%EC%B9%98-%EC%84%9C%EB%B2%84-%EC%B4%88%EA%B0%84%EB%8B%A8-%EC%84%A4%EC%B9%98-%EC%A0%95%EB%A7%90-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC 🌐 아파치(Apache) 서버 초간단 설치 방법 Apache 서버 설치하기 1. 아래 링크로 들어가 아파치 서버를 설치해준다. Apa..

Flutter/Issue

[Flutter] 플러터 웹에서 scroll 안될 때 해결방법

[Flutter] 플러터 웹에서 scroll 안될 때 해결방법 플러터에서 스크롤 기능을 처리하기 위해 일반적으로 SingleChildScrollView를 사용하곤 한다. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('예약 조회 페이지'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: SingleChildScrollView( scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Dat..

Flutter/GetX

[Flutter GetX : 06] GetxService

GetxService 1. GetxController와의 차이점 GetxController는 인스턴스를 자동으로 생성, 삭제할 수 있었지만, (permanent: true 속성을 적용할 경우 자동 삭제 방지 가능) GetxService는 생성은 자동이나, 삭제는 수동으로 호출해야 한다는 차이점이 있다. 2. GetxService 활용 예제 지난번까지는 컨트롤러를 구현할 때 GetxController를 extends 해왔다. 이번에는 GetxService를 상속받아 컨트롤러를 구현하고, 버튼 누르면 카운트가 되는 간단한 예제에 적용시켜보자. (main.dart) import 'package:flutter/material.dart'; import 'package:flutter_getx/src/home.dar..

Flutter/GetX

[Flutter GetX : 05] 바인딩, 컨트롤러 선언과 사용 간소화

바인딩, 컨트롤러 선언과 사용 간소화 목차 1. 바인딩 2. 컨트롤러 선언, 사용 간소화 예제 1. 바인딩 ElevatedButton( onPressed: () { Get.to( () => const GetPut(), binding: BindingsBuilder(() { Get.create( () => DependencyController()); }), ); }, child: const Text("create") ), 바인딩은 페이지 라우트 단계(페이지를 보내는 부분)에서 해당 페이지에서 사용하게 될 컨트롤러를 주입하는 방법이다. 넘어갈 페이지가 어디인지, 어떤 컨트롤러를 주입할 것인지 한번에 지정할 수 있다. 위와 같은 방법으로 BindingsBuilder를 이용해 특정 위젯 내부에 선언해도 상관없으나..

Flutter/GetX

[Flutter GetX : 04] 종속성 관리, 의존성 주입(put, lazyPut, putAsync, create)

종속성 관리, 의존성 주입(put, lazyPut, putAsync, create) 목차 1. Get.put() 2. Get.lazyPut() 3. Get.putAsync() 4. Get.create() provider 방식과 달리 getX는 context에 의존하지 않아서 Controller를 사용할 때만 선언하고 제거하기가 용이하다. 이러한 방식을 종속성 인스턴스 선언 방법이라고 하며, 총 4가지 방식이 제공된다. Get.put() Get.lazyPut() Get.putAsync() Get.create() 4가지 방식을 구현하기 위해 아래에 코드로 4개의 버튼을 구현하였다. (main.dart) import 'package:flutter/material.dart'; import 'package:flu..

Flutter/GetX

[Flutter GetX : 03] 반응형 상태 관리

반응형 상태 관리 목차 1. 버튼 카운트 예제 2. 이벤트 트리거 3. 다양한 자료형 선언과 변경 방법 반응형 상태 관리 방식의 장점 1. 값이 바뀌지 않는다면 굳이 update가 발생하지 않기 때문에 리소스 낭비를 줄일 수 있다는 것이다. 2. 이벤트를 트리거 할 수 있다. 대신 단순 상태 관리 방식에 비해 코드 구현이 다소 직관적이지 않을 수 있다. 1. 버튼 카운트 예제 (lib/main.dart) import 'package:flutter/material.dart'; import 'package:flutter_getx/src/home.dart'; import 'package:get/get.dart'; void main() { runApp(const MyApp()); } class MyApp ext..

Flutter/GetX

[Flutter GetX : 02] 단순 상태 관리

단순 상태 관리 목차 1. 버튼, 페이지 구현 2. Controller 영역 구현 3. 위젯 단위로 분리하기 4. id값을 통한 독립적 상태 관리 1. 버튼, 페이지 구현 버튼을 누르면 카운트가 되는 간단한 예제를 GetX 방식으로 구현해보자. (main.dart) import 'package:flutter/material.dart'; import 'package:flutter_getx/src/home.dart'; import 'package:get/get.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildCo..

Flutter/GetX

[Flutter GetX : 01] 환경 설정, 라우트 관리, Argments, transition, 동적 url 전달

환경 설정, 라우트 관리, Argments, transition, 동적 url 전달 목차 1. GetX의 장점 2. 세팅 하기 3. 라우트 관리 4. transition 5. Argments 전달 6. 동적 url 전달 1. GetX의 장점 Flutter를 위한 매우 가볍고 강력한 라이브러리이며 강력함을 뒷받침 하고 있는 3가지 기본 원칙이 있으며 다음과 같습니다. 첫째. 생산성 - 간결하게 표현할 수 있습니다. - 컨트롤러들을 사용하고 반환시켜주는 처리를 신경 쓰지 않아도 알아서 GetX에서 사용되지 않을 때 제거해주기 때문에 개발자분들은 더욱더 개발에만 신경 쓸 수 있습니다. 둘째. 성능 - GetX는 성능과 최소한의 리소스 소비에 중점을 둡니다. - GetX는 Streams나 ChangeNotifi..

Flutter/Issue

[Flutter] const 생성자를 사용하는 이유

const 생성자를 사용하는 이유 Error : 'Prefer const with constatnt constructors' 위젯을 const 로 선언하면 불필요한 위젯의 rebuild를 줄임으로써 성능 향상에 도움을 줄 수 있다! const 키워드를 사용하여 위젯을 만들면 앱의 수명(lifetime) 동안 위젯이 변경되지 않는다. 이를 통해 플러터는 런타임이 아닌 컴파일 타임에 위젯 작성을 수행하므로 빌드 프로세스를 최적화할 수 있다!(const는 런타임에서 정의되는 final 상수와 달리, 컴파일 타임에서 상수를 정의하기 때문) 위의 이미지에서 보이는 Text 위젯의 경우 앱의 수명 동안 변경되지 않는 상수 문자열이기 때문에 IDE에서 위젯을 const로 선언할 것을 권장하고 있다. 컴파일러는 모든 ..

Flutter/Issue

[Flutter] 에러 : No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().

기본으로 내장되어있는 MaterialApp 위젯을 누락시키면 해당 에러가 발생한다. Material Design이 기본적으로 제공되어지기 위해 MaterialApp 위젯이 runApp 함수를 통해 배치되어야하기 때문이다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget{ Widget build(BuildContext context) { return Scaffold( appBar:AppBar( title: Text('hello world'), ), body:Center( child: Column( children:[ TextButton(onPressed: () ..

lazarus0320
'Flutter' 카테고리의 글 목록