Giter Club home page Giter Club logo

flutter_app_template's Introduction

flutter_app_template

Flutter app code check melos codecov

Flutter App Template

"Flutter App Template" is a project to template and introduce an approach to developing Flutter apps, including architecture and project structure.

"Flutter App Template" repository employs a mono-repo and consists of several internal packages and apps.

Packages overview

themes

This package is responsible for the appearance of ThemeData and other appearance-related data used in Flutter apps.

util

This package stores general-purpose functions that are too small to be cut out into a stand-alone package.

App overview

flutter_app

This is a template app package for Flutter apps. It comes with dev, stg, and prod environments set up.

Change the app ID or app name to start building it as a separate app right away.

Also check the flutter_app/README.md.

How to start development

make

The make command will install the required Dart packages, such as FVM and Melos.

ToDo list required after creating a new repository using this template

  1. Replace Bundle ID (Package name) with your App ID. jp.co.altive.fat -> your.domain.id
  2. Change CFBundleName and CFBundleDisplayName in ios/Runner/info.plist to your app name.
  3. Change FlutterAT in defaultConfig/resValue of android/app/build.gradle to your app name.
  4. Create a project in Firebase.
  5. Create an Android app, download google-services.json, and place it in android/app/src/{dev or stg or prod}.
  6. Create an iOS app, download GoogleService-Info.plist, and place it in ios/{dev or stg or prod}.
  7. Modify googleReversedClientId in dart_defines/{dev, stg, prod}.env to match the contents of each GoogleService-Info.plist.
  8. Create a Web app and modify the parameters in firebaseConfig in web/index.html according to the Firebase SDK additions. - apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId, measurementId

How to create a new package

If the project name and the output directory name of the package are the same, --project-name can be omitted.

# Package
flutter create -t package packages/{directory_name} --project-name {project_name}
# App
flutter create --org jp.co.altive packages/{directory_name} --project-name {project_name}

Firebase SDK version for iOS and macOS

FirebaseSDKVersionTag.txt manages the SDK version you wish to specify.

↓ For the latest version, click here. https://github.com/invertase/firestore-ios-sdk-frameworks/releases

  • I wanted to use the latest 9.5.0-1 or higher, but the cloud_firestore 3.4.8 package in pub.dev seemed to be unsupported, so I used 9.4.0.

Addition of ISSUE_TEMPLATE

If you do not have .github/ISSUE_TEMPLATE in a repository, you can use Issue templates placed in a special repository named .github.

For altive organization, the Issue templates in the altive/.github repository should also work for this repository.

If necessary, please copy and use the Issue template from the above repository.

References

Internationalization User Guild PresentationDomainSeparation Flutter Architecture Blueprints

Thank you!

flutter_app_template's People

Contributors

boywithdv avatar dependabot[bot] avatar k-nkmr avatar naipaka avatar pr-writer[bot] avatar riscait avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

flutter_app_template's Issues

Internationalization using slang

推定作業時間

3時間

概要

slangパッケージを使って多言語化を行う。

詳細

現段階で、一部Flutter標準の flutter_localizations と arb ファイルを使用した多言語化を実装している。
使い勝手が悪い(arbファイルの分割や階層化ができない、など)ため、
ある程度人気がある slang パッケージを使った多言語化を試したい。

パッケージのREADMEに詳しい解説(Getting Startedなど)があるため、これを見ながら導入していく。

既存の文言ファイル(ARB)からの移行

lib/l10n/app_en.arb , lib/l10n/app_ja.arb があります。
(これらのファイルは古いため、未使用の単語が含まれている可能性があります。)

既存ではこのように使用しています。

final l10n = L10n.of(context);
Text(l10n.appInfoAppBarTitle);

slangでは、コマンドでARBをJSONに変換してくれるようです👍
https://pub.dev/packages/slang#arb

ゴール

  • ARBをJSONに変換できている
  • 多言語化のやり方が、既存のL10n.of(context)から、slangを使ったTranslations.of(context)に移行できている

Remove appIdSuffix and add appId representing the Bundle ID (Package name) to be used

概要

現在は dev.env などで appIdSuffix を設定して使っているが、これを削除し代わりに、 appId を追加して使用するようにする。
e.g.

  • "appIdSuffix": ".dev" -> "appId: "jp.co.altive.fat.dev"

目的

prod, stgでAppID(Bundle ID, Package name) が異なるアプリも考えられるため、 appIdSuffix よりも柔軟に対応できて、より明示的な appId を指定できる形にしておきたい。

Tasks

  • dev
  • stg
  • prod
  • project.pbxproj ファイル内で appIdSuffix を使用しているところを修正( PRODUCT_BUNDLE_IDENTIFIER
  • build.gradle ファイルで appIdSuffix を使用しているところを修正 ( applicationIdSuffix -> applicationId )

導入済みリポジトリの参考リンク

https://github.com/altive/yourrank/blob/4b5111a2b5a88337231b9ea5d7545aab1bf82047/yourrank_app/dart_defines/stg.env

White screen when launching app on Chrome

Overview

When I try to start the project in chrome, I get a blank screen.

Expectation

The counter application must be activated.

reproduction procedure

  1. Since we have .vscode/launch.json, let's run it using VS Code features instead of commands.
  • 機種名: MacBook Air (13-inch,2024)
  • OS: macOS 14.4.1
  • App Version: 1.0.0

Screen shots

screen shot 2024-04-03 11 41 01

Additional information

macOS , Android , iOS can be confirmed to work.

Change the file used by `--dart-define-from-file` from `.json` to `.env`.

推定作業時間

1時間

概要

--dart-define-from-file では、後から .env ファイルがサポートされた。
現在は .json を使用しているが、これを .env に変更する。

ENVにする目的

JSONではコメントが使えない。キーを引用符で囲まなくてはいけない。
ENVは環境という意味もあり、名前が合っている。

必要そうなこと

  • {flavor}.json{flavor}.env へファイル名変更
  • launch.json の更新
  • その他 {flavor}.json を使用、または言及している箇所がないかを検索して、あれば{flavor}.env へ置換する

Related

flutter/flutter#128667

AndroidでAppBundleを作成するための設定を追加

android/build.gradle

        // 最新バージョンはここで確認:Firebase Android SDK Release Notes
        // https://firebase.google.com/support/release-notes/android
        classpath 'com.google.gms:google-services:4.3.15' // For Forebase.
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.4' // For Crashlytics.

~~~

subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

device_info_pluginの導入

機能の概要

受け入れ基準

  • features/device_info を作って、実行デバイス情報を取得・使用しやすいようにする

内部資料リンク

外部資料リンク

Change slang files from JSON to YAML

機能の概要

slangの言語ファイルはデフォルトではJSONだが、JSONに比べて以下のメリットがあるためYAMLに変更する。

  • キーを引用符で囲まなくても良い
  • コメントを書ける
  • 末尾カンマに悩まされない

AIにお願いして書き換えてもらいましょう!
GitHub CopilotかChatGPTがお勧めです。

受け入れ基準

  • JSONではなくYAMLに変更して、コード生成できていること

内部資料リンク

外部資料リンク

OneTapLog app features

機能の概要

Logリスト画面

  • 最終ログ時間順に並べられたログをGridViewで一覧できる
  • プラスアイコンボタンを押すと新規Log作成画面が開く

Log作成画面

  • Logタイトルを設定できる
  • Log説明(メモ)を設定できる
  • アイコンを設定できる
  • 単位を設定できる(個、回など)

Log編集画面

  • 既存の情報が入力された状態の「Log作成画面」、各項目は変更できる
  • 最下部に追加:「危険領域」「削除」「リセット」できる

Log履歴画面

  • 実行されたログを新しい順にテーブルリスト表示できる
  • 「〇〇が〇〇を実行した!」「2022年10月6日12時47分」と表示する
  • 特定のログで絞り込み表示できる

設定画面

Proプラン限定、グループ機能

  • Logを共有して一緒に進行できるグループを作れる
  • Log作成時、グループのLogにするかのスイッチ
  • Logの担当者を選択できる
  • グループLogをメンバーが実行した時、プッシュ通知を受信できる
  • ログ履歴画面で、メンバーごとに絞り込み表示できる

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.