flutter_clean_architecture_v1

jju·2024년 1월 21일
0

자주 사용하지 않는 또는 유틸성 기능이라면 class로 감싸주는게 좋습니다.

왠만하면 class 안에서 instance를 생성하는게 좋지 않다. -> 외부에서 생성해서 페이지가 받아서 진행하는게 더 좋습니다.
클래스들 끼리 결합되어 있는 것을 느슨하게 할 수 있는 방법중에 가장 쉬운 방법은 외부에 생성된 인스턴스를 받아서 사용하는 것

  • 간단한 예)
    - PixabayApi 라는 api 관리하는 페이지가 있다는 가정하에 기존에는 HomeScreen 안에PixabayApi 지정해 줬다면 main.dart에서 지정을 하고 데이터를 전달하는 방식으로 변경하였습니다.
  • 하지만 해당 코드도 depth가 길어지면 데이터를 계속 그리고 코드가 길어지는 전달하는 방식은 무리무리 데쓰
  • 다음글에서 다른 방법으로 클린아키텍쳐를 적용하는 방법에 대해서 설명하겠습니다.

main.dart

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HomeScreen(api : PixabayApi()),
    );
  }
}

HomeScreen.dart

class HomeScreen extends StatefulWidget {
  final PixabayApi api;
  const HomeScreen({super.key, required this.api});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // final api = PixabayApi();
  final _controller =  TextEditingController();
  List<Photo> _photos = [];
 //빈 리스트로 두었다가 변환된 Photo 를 Photos에 담는다.


  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          '이미지 검색 앱',
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(10.0),
                  ),
                ),
                suffixIcon: IconButton(
                  onPressed: () async {
                    final photos = await widget.api.fetch(_controller.text);  //photos 는 작명이지만 역할이 있습니다. fetch 를 받는 pohto 모델의 photos 입니다.
                    setState(() {
                      _photos = photos; //controller.text 사용자 입력에 따라 pthos 가 _photos에 들어가면서 화면이 다시 그려지게 됩니다.
                    });
profile
한결

0개의 댓글