https://www.youtube.com/watch?v=mEPm9w5QlJM&t=15433s
위 유튜브를 보며 Flutter 3.0으로 인스타그램 클론을 만들기로 했다.
빌드 순서를 기억한다는 의미로 이 글을 쓴다.
flutter create test_project
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter 3.0 Instagram Clone',
theme: ThemeData.dark(),
home: const Center(child: Text("3.0")),
);
}
}
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);
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);
Widget build(BuildContext context) {
return const Center(child: Text('mobile'),);
}
}
main.dart
home: const ResponsiveLayout(webScreenLayout: WebScreenLayout(), mobileScreenLayout: MobileScreenLayout(),),
링크 참조 : https://velog.io/@cho2kkh/Flutter-Pubspec-Assist
Flutter 3.0으로 업데이트 되면서 Firebase 메인의 Flutter 아이콘을 클릭하면 아주 간단하게 Firebase 프로젝트를 로컬 프로젝트에 등록시킬 수 있게 되었다.
테스트 모드 + asia-northeast3 로 선택.
규칙 설정
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Podfile 플렛폼 10으로 설정.
platform :ios, '10.0'
/ios 경로에서 아래 스크립트 실행.
arch -x86_64 pod install --repo-update
main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}