Cupertino Flutter Chat 앱 전체 가이드 #1

Cupertino 탭 바 Flutter

이것은 Cupertino 테마를 사용하는 iOS 사용자를 위한 모양과 느낌을 가진 Flutter Chat 앱용 Flutter의 탭 표시줄로 알려진 하단 탐색 표시줄을 빌드하는 첫 번째 챕터입니다.

Flutter는 일반적으로 dartvm으로 알려진 dart 가상 머신을 실행하는 모든 플랫폼을 위한 아름다운 UI를 만드는 현대적인 방법입니다. Flutter는 스키아 엔진을 사용하여 화면에 요소를 그립니다. 이를 기반으로 Flutter로 빌드된 앱은 기본적이고 고성능이라고 말할 수 있습니다. Flutter는 선언적 접근 방식을 사용하여 상상할 수 있는 모든 것을 빌드할 수 있는 간단한 위젯 트리를 사용하여 UI를 빌드합니다. Flutter는 비교적 새롭지만 그의 인기는 매일 기하급수적으로 증가하고 있습니다.



왜 우리는 를 구축하려고 합니까? 전 세계에 수많은 다중 플랫폼 프레임워크here in this article가 있으므로 Flutter와 Firebase가 다음 MVP 프로젝트를 구축하는 데 가장 적합한 프레임워크인 이유에 대해 제 의견을 제시합니다.

개발용 머신 설정

Flutter/dart 개발을 위한 최고의 두 가지 IDE는 IntelliJ Idea와 Visual Studio Code입니다.
IDE를 설치했으면 this official guide에 따라 Flutter SDK를 설치합니다.

샘플 앱 실행

모든 것이 설정되면 flutter create를 실행하거나 IDE에서 create/new project를 사용하여 첫 번째 flutter 프로젝트를 만듭니다. Android 또는 iPhone 에뮬레이터에서 앱을 실행합니다. Flutter의 새로운 릴리스를 통해 이제 모든 플랫폼, Windows, macOS, Android, iOS 및 웹에서 앱을 실행할 수 있습니다.

쿠퍼티노 앱 만들기

FLutter 애플리케이션의 진입점인 main.dart 파일에서 MaterialApp을 CupertinoApp으로 교체하여 iOS의 UI/UX를 적용할 수 있도록 합니다. 테마 매개변수는 아래와 같이 CupertinoThemeData입니다.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: HomePage(),
      theme: CupertinoThemeData(
          brightness: Brightness.light, primaryColor: Color(0xFF08C187)),
    );
  }
}

CupertinoPage 및 CupertinoTab

HomePage Widget에서 Scaffold Widget을 CupertinoPageScaffold로 바꾸십시오. 이렇게 하면 Cupertino 위젯을 내장하고 iOS 모양과 느낌을 가질 수 있습니다.

CupertinoPageScaffold의 자식과 CupertinoTabScaffold인 화면 래퍼에서 자동으로 페이지를 조정하여 하단 내비게이션 바를 제공합니다.

탭 막대 매개변수는 CupertinoTabBar와 그 안에 있는 "탭"목록을 받습니다. 최소값은 목록의 두 요소여야 합니다. 탭 빌더는 색인을 기반으로 렌더링될 위젯을 수신하며 색인은 활성 하단 탭입니다.

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CupertinoTabScaffold(
        resizeToAvoidBottomInset: true,
        tabBar: CupertinoTabBar(
          items: [
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return null;
        },
      ),
    );
  }
}

하단 탐색 버튼 아이콘 추가

CupertinoTabBar 목록은 레이블과 아이콘이 필요한 BottomNavigationBarItem 유형의 요소를 받습니다. 채팅, 통화, 사람 및 설정에 대한 이러한 요소 중 4개를 만들어 보겠습니다.

CupertinoTabBar(
      items: [
        BottomNavigationBarItem(
          label: "Chats",
          icon: Icon(CupertinoIcons.chat_bubble_2_fill),
        ),
        BottomNavigationBarItem(
          label: "Calls",
          icon: Icon(CupertinoIcons.phone),
        ),
        BottomNavigationBarItem(
          label: "People",
          icon: Icon(CupertinoIcons.person_alt_circle),
        ),
        BottomNavigationBarItem(
          label: "Settings",
          icon: Icon(CupertinoIcons.settings_solid),
        )
      ],
    ),

각 탭 아이콘에 대한 전용 화면 위젯 만들기

클래스에서 우리는 CupertinoTabBar의 tabBuilder에서 BottomNavigationBarItem과 동일한 순서로 렌더링될 "화면"목록을 보유할 배열 변수를 생성합니다.

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  var screens = [Chats(), Calls(), People(), Settings()];

tabBuilder: (BuildContext context, int index) {
  return screens[index];
},

결론 및 다음 장

Flutter Cloud Firestore 채팅 앱에서 Firebase 에뮬레이터를 설정하고 사용하는 방법을 배웁니다. Firebase Cloud Firestore는 Flutter와 공식적으로 통합된 최신 실시간 데이터베이스입니다.
이것은 완전하고 간결한 Firebase Firestore Flutter Tutorial인 Flutter 2 Firebase Tutorial입니다. Cloud Firestore 통합을 다루고 Firestore 쿼리를 수행하여 데이터를 Flutter Chat 앱으로 가져옵니다.

이 Flutter 개발자 커뮤니티를 성장시키는 데 도움이 되도록 내 Flutter 동영상을 팔로우하고 팔로우하세요.



이 장의 동영상 가이드
, 그리고