[Flutter] Clone - 당근마켓 시작

이번에는 당근마켓 클론 코딩입니다. 이름은 사과마켓이라고 정해봤습니다

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

기본 구조는 아래와 같습니다.

네비게이션 : GetX

상태관리 : GetX, Provider

서버 : Firebase

주소 검색 open API : http://www.juso.go.kr/addrlink/addrLinkApi.do

지도 서비스 : 구글 map 예정

지도 검색 서비스 : 구글 예정

 

 

초기화면은 아래와 같다.

 

 

 

main.dart - 초기 2초동안 SplashScreen 화면을 보여주다가 AppleApp 으로 화면이 전환됨, 이때 0.5초 동안 천천히 변경되게 AnimatedSwitcher 위젯을 사용함

 

import 'package:flutter/material.dart';

import 'src/apple_app.dart';
import 'src/screens/splash_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Object>(
        future: Future.delayed(const Duration(seconds: 2), () => 100),
        builder: (context, snapshot) {
          // 장면전환을 천천히 부드럽게 처리하는 위젯
          return AnimatedSwitcher(
              duration: const Duration(milliseconds: 500),
              child: _splashLoadingWidget(snapshot));
        });
  }

  StatelessWidget _splashLoadingWidget(AsyncSnapshot<Object> snapshot) {
    // future has 3 state, hasError, hasData, waiting
    if (snapshot.hasError) {
      debugPrint('error occur while loading ~');
      return const Text('Error Occur');
    } else if (snapshot.hasData) {
      debugPrint('data is ${snapshot.data.toString()}');
      return const AppleApp();
    } else {
      return const SplashScreen();
    }
  }
}

 

 

./src/screens/splash_screen.dart - 초기 2초당안 보여주는 사과 로고 화면

 

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ExtendedImage.asset('assets/imgs/apple.png'),
            const SizedBox(height: 100.0),
            const CircularProgressIndicator(color: Colors.red)
          ],
        ),
      ),
    );
  }
}

 

 

./src/apple_app.dart

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
    );
  }
}