Flutter 공부하면서 개발하면서 정리

반응형

- Flutter 사용한 라이브러리

[ 🛠 라이브러리 버전 ]

- get 4.6.5 : 상태관리 패키지
- http 0.13.5 : api 연동 패키지.
- shared_preferences 2.1.0 : 디바이스에 단순 데이터 저장.
- url_launcher 6.1.10 : 기본 브라우저 url 열기, 기본 이메일 앱에서 이메일 보내기, 기본 전화앱을 사용해 전화걸기, 기본 메시징 앱을 이용해서 sms 메시지 보내기 등 지원
- flutter_launcher_icons 0.13.1 : 앱 아이콘 한번에 바꿔주는 패키지
- image_picker 0.8.7+4 : 앨범 또는 카메라에서 이미지 가져오는 패키지
- flutter_local_notifications 14.0.0 : 앱 실행중일때 푸시 메시지 받게 하는 패키지
- flutter_native_splash 2.2.19 : 앱 스플래시 한번에 적용시켜 주는 패키지
- flutter_slidable 3.0.0: 슬라이드 동작으로 버튼 구현 패키지.
- permission_handler 10.2.0 : 디바이스 권한 관리
- animations 2.0.7 : 다양한 애니메이션 적용 패키지. (비슷, simple_animations)
- carousel_slider 4.2.1 : 다양한 슬라이더 적용 패키지.
- share_plus 4.5.3 : 플랫폼 공유 유아이를 통해 텍스트나 파일 등의 앱 콘텐츠를 공유하기 위한 플러그인.
- badges 3.1.1 : 다양한 뱃지 기능 지원 패키지.

 

- 프로젝트 구조

[ 📁 폴더 구조 ]

app
└ android
└ assets 
	└ images
	└ fonts
└ ios
└ lib
	└ models ( global 데이터 느낌 )
	└ screens ( page 단 )
	└ service ( api 연결 )
	└ utils ( 로직 코드 )
	└ widgets ( 컴포넌트 )
	└ test ( TDD 작성 )

 

1. 그림자 넣기 -> BoxShadow

Container(
            height: 300, width: double.infinity,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(6)),
                color: mainPink,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 0,
                    blurRadius: 5.0,
                    offset: Offset(0, 10), // changes position of shadow
                  ),
                ],
            ),

 

2. 비율 주고 배치하기 -> Expanded, Flexible

ex) 왼쪽 여백 1, 중간 12, 오른쪽 여백 1 비율로 구성하기

Row(
	children: [
    	Expanded(child: SizedBox()),
        Flexible(
        	flex:12,
            child: ...,
        ),
        Expanded(child: SizedBox()),
    ]
)

 

3. StatefulWidget vs StatelessWidget

StatefulWidget -> 안에 있는 내용이 변경될 가능성이 있는 위젯에 사용하기 적합함

StatelessWidget -> 변화가 없는 정적인 텍스트나 이미지를 담기에 적합함

 

4. HTTP 라이브러리를 활용한 API 통신 방법

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:app/models/schedule/singleday_food_model.dart';
import 'package:app/api/url_mapping.dart';

class FoodService {
  static Future<OneDayFood> getOneDayFood(String year, String month, String day) async{
    String URL = '${url}kindergarten/food?year=$year&month=$month&day=$day';
    print(URL);
    try{
      final response = await http.get(Uri.parse(URL));
      if(response.statusCode == 200){
        final OneDayFood dayFood = sigledayFoodFromJson(utf8.decode(response.bodyBytes)).oneDayFood;
        return dayFood;
      }else {
        print('Error 발생 ');
        OneDayFood tmp = OneDayFood(foodSeq: 1, rice: "", soup: "", dish1: "", dish2: "", dish3: "", morningSnack1: "", morningSnack2: "", afternoonSnack1: "", afternoonSnack2: "");
        return tmp;
      }
    }catch(e){
      print(e);
      OneDayFood tmp = OneDayFood(foodSeq: 1, rice: "", soup: "", dish1: "", dish2: "", dish3: "", morningSnack1: "", morningSnack2: "", afternoonSnack1: "", afternoonSnack2: "");
      return tmp;
    }
  }
}

받아온 데이터에서 한글이 깨지는 것을 방지하기 위해 사용한 코드.

utf8.decode(response.bodyBytes)

 

5. GetXController를  활용한 상태관리

<단순형>

class CalendarFood extends StatelessWidget {
  const CalendarFood({super.key});

  @override
  Widget build(BuildContext context) {
    FoodController fc = Get.put(FoodController());
    return GetBuilder<FoodController>(
        builder: (_) =>
      Column(
      children: [
      ...

- return 부분에 GetBuilder<FoodController> .. 라고 감싸주기. -> 단순형이 감지할 수 있다.

- 혹은 FoodController.to.~~을 통해 직접 접근 (find를 통해 찾는 방법)

 

 

<반응형>

class TodayInfo extends StatelessWidget {
  const TodayInfo({super.key});

  @override
  Widget build(BuildContext context) {
    final tc = Get.put(TodayController());
    return Obx(() => Column(
      children: [
        // 오늘의 일정 타이틀
        Padding(
          padding: const EdgeInsets.fromLTRB(10, 5, 0, 5),
          child: Row(

- Get.put으로 Controller 구독하기

- Obx를 통해 상태 변화 감지

 

class TodayController extends GetxController {
  static TodayController get to => Get.find();
  // 달력에서 여러 날의 일정
  RxList<OneSchedule> scheduleList = RxList<OneSchedule>();
  // 당일의 일정
  RxList<OneSchedule> todayScheduleList = RxList<OneSchedule>();
  // 오늘 날짜
  Rx<DateTime> now = DateTime.now().obs;
  RxString todayWeek = getDayOfWeek(DateTime.now().year, DateTime.now().month, DateTime.now().day).obs;
  ...

- Rx와 obs를 사용해서 상태를 감지하는 친구로 만들어준다.