[Flutter] Modular

Noah·2025년 2월 4일

Module di flutter_modular monorepo routing

Flutter

목록 보기

9/11

flutter_modular

Flutter 애플리케이션 개발에서 라우팅과 의존성 주입을 모듈화하여 관리할 수 있도록 도와주는 라이브러리이다. 애플리케이션의 유지보수성과 확장성을 개선하기 위해 큰 규모의 프로젝트에 유용하다.

주요 기능

모듈화된 라우팅
각 기능별로 독립된 라우트를 가진다.

모듈화된 의존성 주입
각 모듈 또는 기능에 필요한 의존성을 독립적으로 주입할 수 있다.

사용 방법

1. ModularApp 위젯 추가

import 'package:flutter/material.dart';

void main(){
  return runApp(
    ModularApp(
      module: /*<MainModule>*/, 
      child: /*<MainWidget>*/,
    ),
  );
}

2. AppModule 추가

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';

void main(){
  return runApp(
    ModularApp(
      module: AppModule(), 
      child: /*<MainWidget>*/,
    ),
  );
}

class AppModule extends Module {
  @override
  void binds(i) {}

  @override
  void routes(r) {}
}

3. MaterialApp or CupertinoApp 인스턴스 추가

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';

void main(){
  return runApp(
    ModularApp(
      module: AppModule(), 
      child: AppWidget(),
    ),
  );
}

class AppWidget extends StatelessWidget {
  Widget build(BuildContext context){
    return MaterialApp.router(
      title: 'My Smart App',
      theme: ThemeData(primarySwatch: Colors.blue),
      routerConfig: Modular.routerConfig,
    );
  }
}

class AppModule extends Module {
  @override
  void binds(i) {}

  @override
  void routes(r) {}
}

pushNamed, popUntil 도 사용 가능하지만 여기선 웹 환경과 유사한 navigate 사용

class AppModule extends Module {
  @override
  void routes(r) {
    r.child('/', child: (context) => HomePage());
    r.child('/second', child: (context) => SecondPage());
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Modular.to.navigate('/second'),
          child: Text('Navigate to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Modular.to.navigate('/'),
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

5. Dependency Injection

class AppModule extends Module {
  @override
  void binds(i) {
    i.addSingleton(() => EventBus());
  }
}

// 사용 시
final EventBus _eventBus = Modular.get<EventBus>();

6. Imports

각 기능에서 정의 된 모듈을 imports 하여 사용

class AppModule extends Module {
  @override
  void binds(Injector i) {
    i.addSingleton(() => EventBus());
    imports.map((import) => import.binds(i)).toList();
  }

  @override
  void routes(RouteManager r) {
    r.child('/', child: (context) => HomePage());
    imports.map((import) => import.routes(r)).toList();
  }

  @override
  List<Module> get imports => [
        AddModule(),
        SettingModule(),
      ];