[플러터로 달력만들기] #1. 기본 구조 작성하기

JS로도 만들었던 달력,,, 플러터에서도 만들었다

처음엔 플러터에 다양한 달력 라이브러리들 중 하나를 사용해보려 했지만

마음에 드는 라이브러리가 없었고, 그나마 마음에 드는 것도 커스텀을 하기 어려웠기에 직접 위젯을 구현하기로 하였다.

 

일단 flutter 기본 프로젝트 작성부터 하자.

구조는 다음과 같다

 

1. bindings/calendar_binding.dart

class CalendarBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => CalendarController());
  }
}

https://fl0wering.tistory.com/87?category=1034236

위 글에서 작성했던 바인딩 클래스이다. 

2. conrtollers/calendar_controller.dart

class CalendarController extends GetxController {
  static CalendarController get to => Get.find();
}

달력을 만들며 사용될 변수와 함수들이 들어갈 controller

3. routes/route_name.dart , routes/route_page.dart

class RouteName {
  static const calendar = '/calendar';
}

class RoutePage {
  static final page = [
    GetPage(
      name: RouteName.calendar,
      page: () => Calendar(),
      binding: CalendarBinding(),
      transition: Transition.noTransition,
    ),
  ];
}

프로젝트에서 사용될 라우트들을 모아 두고, 각 페이지를 설정해준다

4. view/calendar.dart

class Calendar extends GetView<CalendarController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("달력"),
        backgroundColor: Colors.white,
        elevation: 1,
        centerTitle: true,
        titleTextStyle: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
        toolbarHeight: 50,
      ),
      body: Center(
        child: Text("?"),
      ),
    );
  }
}

메인이 될 페이지. 일단 구조만 작성하기 위해 appBar와 center text만 넣어둔 상태이다.

5. main.dart

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        fontFamily: 'Pretendard',
      ),
      getPages: RoutePage.page,
      initialRoute: RouteName.calendar,
    );
  }
}

 

 

이로서 달력을 만들기 위한 기본 프로젝트 구조 작성은 끝이 났다