[Flutter] 인스타그램 클론 - 1

https://www.youtube.com/watch?v=mEPm9w5QlJM&t=15433s
위 유튜브를 보며 Flutter 3.0으로 인스타그램 클론을 만들기로 했다.

빌드 순서를 기억한다는 의미로 이 글을 쓴다.

프로젝트 생성

flutter create test_project

main() 코드 정리

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter 3.0 Instagram Clone',
      theme: ThemeData.dark(),
      home: const Center(child: Text("3.0")),
    );
  }
}

Theme 컬러 지정

lib/utils/color.dart

import 'package:flutter/material.dart';

const mobileBackgroundColor = Color.fromRGBO(0, 0, 0, 1);
const webBackgroundColor = Color.fromRGBO(18, 18, 18, 1);
const mobileSearchColor = Color.fromRGBO(38, 38, 38, 1);
const blueColor = Color.fromRGBO(0, 149, 246, 1);
const primaryColor = Colors.white;
const secondaryColor = Colors.grey;

main.dart

theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: mobileBackgroundColor,
      ),

반응형 레이아웃 설정

브레이크포인트 지정

lib/utils/dimensions.dart

import 'package:flutter/material.dart';

const webScreenSize = 600;

레이아웃 설정

웹 레이아웃과 모바일 레이아웃을 final로 선언하고, required로 지정한다.

responsive/responsive_layout_screen.dart

import 'package:flutter/material.dart';
import 'package:test_project/utils/dimensions.dart';

class ResponsiveLayout extends StatelessWidget {
  final Widget webScreenLayout;
  final Widget mobileScreenLayout;
  const ResponsiveLayout({
    Key? key,
    required this.webScreenLayout,
    required this.mobileScreenLayout,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > webScreenSize) {
          return webScreenLayout;
        }
        return mobileScreenLayout;
      },
    );
  }
}

웹, 모바일 레이아웃 생성 후 메인에 추가

responsive/mobile_screen_layout.dart
responsive/web_screen_layout.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('mobile'),);
  }
}

main.dart

home: const ResponsiveLayout(webScreenLayout: WebScreenLayout(), mobileScreenLayout: MobileScreenLayout(),),

Firebase 플러그인 설치

링크 참조 : https://velog.io/@cho2kkh/Flutter-Pubspec-Assist

Firebase 프로젝트 등록

Flutter 3.0으로 업데이트 되면서 Firebase 메인의 Flutter 아이콘을 클릭하면 아주 간단하게 Firebase 프로젝트를 로컬 프로젝트에 등록시킬 수 있게 되었다.

Firebase Cloud Firestore

테스트 모드 + asia-northeast3 로 선택.

규칙 설정

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
      }
  }
}

IOS 설정

Podfile 플렛폼 10으로 설정.

platform :ios, '10.0'

/ios 경로에서 아래 스크립트 실행.

arch -x86_64 pod install --repo-update

Firebase Initialization

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}