Flutter を使用してチップ計算機を作成する方法

Flutter モバイルアプリ開発フレームワークの人気が高まるにつれて、多くの企業が Flutter をプロジェクトに使用することを選択しています。

多くの開発者は、ウィジェットのシンプルな構造を使用してピクセルパーフェクトな UI を備えたアプリを開発できることを高く評価しています。 Flutter は、UI の開発がシンプルで、Dart プログラミング言語を使用して機能ロジックを強化できるため、モバイルアプリ開発の未来だと思います。

このチュートリアルでは、主に、シンプルな Tip Calculator アプリを作成して、Flutter フレームワークの基本を説明することに焦点を当てています。ステートフルウィジェットクラスとステートレスウィジェットクラスを含む標準的なコーディングパターンと、Flutter アプリの開発中に最もよく使用するいくつかのウィジェットについて説明します。

ここでのアイデアは、スターター Flutter プロジェクトをセットアップすることから始めることです。次に、全体的な UI と基本機能の実装に進みます。

それでは、始めましょう!

Flutter プロジェクトの設定方法

新しい Flutter プロジェクトを作成するには、システムに Flutter SDK がインストールされている必要があります。シンプルで迅速なインストールプロセスについては、フラッターの公式ドキュメントに従うことができます。

Android プラットフォーム用のアプリを開発する場合は、Android Studio と Android SDK も必要になることに注意してください。

ドキュメントに従ってすべてが正常にセットアップされたら、ターミナルで次の Flutter コマンドを実行できます。

flutter create tipCalculator

このコマンドは、スターター Flutter プロジェクトを自動的にダウンロードしてセットアップします。これで、Visual Studio Code IDE でプロジェクトを開くことができます。

デバイスシミュレーターまたは実際のスマートフォンデバイスが接続されている場合は、次のコマンドを実行するだけでアプリを起動できます。

flutter run

または、キーボードで「F5」を押して、VSCode のメニューオプションをトリガーすることもできます。そのメニューから、アプリを起動するデバイスを選択できます。

拡張子が .dart のファイル内にいる必要があることに注意してくださいこのコマンドを正常に実行するには.

上記のコマンドまたは F5 を使用してビルドして実行しますエミュレータ/実際のデバイスで次のスターターテンプレートを取得するには:

これで、Flutter アプリが稼働しているはずです。

メインプロジェクトファイル main.dart で何が行われているかについて、もう少し詳しく見ていきましょう。 .

main.dart でファイルには、2 つのクラスオブジェクトがあります。 1 つはステートフルウィジェットに拡張され、もう 1 つはステートレスウィジェットに拡張されます。では、それはどういう意味ですか?

ステートフルウィジェット:アプリの状態を格納するクラス。状態が変化し、このステートフルウィジェットクラスのウィジェットのレンダリングをトリガーすることができます。動的な状態の変化に貢献します。
ステートレスウィジェット:このクラスにはステートがありません。変更されないウィジェットビューを表します。動的な状態の変化には寄与しません。

main.dart ファイルには main() も含まれています MyApp を呼び出す関数 runApp 内のクラスデバイスで Flutter アプリの起動をトリガーするメソッド。

チップ計算機の UI を構築する方法

UI の実装を開始するには、MyHomePageState 内にあるものをすべてクリアする必要があります。クラスです。

それをクリアした後、単純な Scaffold を返しますビルド関数内からのウィジェット。

Scaffold ウィジェットは appBar を追加するためのプロパティを提供します body と同様に .ここでは、シンプルなアプリバーを追加します。以下のコードスニペットで全体的な実装を確認できます:

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
      ),
      body: Container()
    );
  }
}

appBar を追加した後、ビルドして実行します AppBar を使用して title のウィジェット財産。エミュレータ画面に次の結果が表示されます:

Flutter にはホットリロードがあることに注意してください Dartファイルの保存中。したがって、プロジェクトの Dart ファイルに変更を保存すると、その変更はエミュレーターに自動的に反映されます。

ステップ 1:アプリバーをデザインする

ここでは、AppBar を変更します。提供するさまざまなプロパティを使用するウィジェット。以下のスニペットで変更されたコードを確認できます:

appBar: AppBar(
  title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
  centerTitle: true,
  elevation: 0.0,
  backgroundColor: Colors.white70,
),

ビルドして実行すると、エミュレータ画面に次の結果が表示されます:

ここでは、基本的な AppBar のいくつかを使用しました

などのウィジェットプロパティ

elevation これにより、z-index と同様に、アプリバーで影の効果を制御できます。
centerTitle タイトルを一元化するため、
背景色も白に変更しました。

ステップ 2:足場本体を設計する

この時点まで、空の Container しかありませんでした body のウィジェット財産。ここで、いくつかのプロパティと子ウィジェットを Container に追加します。以下のコードスニペットで指示されているウィジェット:

body: Container(
  color: Colors.white70,
  padding: const EdgeInsets.all(16.0),
  child: Center(
    child: Form(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        ],
      ),
    ),
  ),

ビルドして実行すると、エミュレータ画面に次の結果が表示されます:

上のスクリーンショットでわかるように、ボディの背景色を白に変更しました。また、いくつかの padding を追加しました Center とともに UI 全体を本体に集中させる子ウィジェットとしてのウィジェット。

Center ウィジェットには Form がありますウィジェット (その子の 1 つ) に、テキストフィールドを持つ単純なフォームを作成します。

そして最も重要なのは、Column があることです。 Form の子ウィジェットとしてのウィジェット . Column ウィジェットは children を提供します画面に垂直に表示される任意の数のウィジェットを統合できるウィジェット配列プロパティ。

ステップ 3:定数と変数を定義する

フォーム要素 (テキストフィールドを含む) を実装する前に、入力フィールドからの入力を処理するためにいくつかの定数を定義する必要があります。

以下のコードスニペットで、必要な定数と変数を確認できます。

// This is the default bill amount
  static const defaultBillAmount = 0.0;

  // This is the default tip percentage
  static const defaultTipPercentage = 15;

  // This is the TextEditingController which is used to keep track of the change in bill amount
  final _billAmountController =
      TextEditingController(text: defaultBillAmount.toString());

  // This is the TextEditingController which is used to keep track of the change in tip percentage
  final _tipPercentageController =
      TextEditingController(text: defaultTipPercentage.toString());

  // This stores the latest value of bill amount calculated
  double _billAmount = defaultBillAmount;

  // This stores the latest value of tip percentage calculated
  int _tipPercentage = defaultTipPercentage;

上記のコードスニペットでは、TextEditingController を使用していることがわかります。方法。このコントローラメソッドにより、TextFormField でテキスト入力を処理できます。ウィジェットは後でデフォルト値に初期化されます。

ステップ 4:入力フォームフィールドを追加する

ここで、TextFormField を使用して 2 つの入力フォームフィールドを追加します。ウィジェット。

このウィジェットを使用している間、以前に定義したコントローラー変数をコントローラープロパティに強制的に割り当てる必要があります。以下のコードスニペットで、ウィジェットの全体的なコーディング実装を確認できます。

body: Container(
        color: Colors.white70,
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Form(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextFormField(
                  key: Key("billAmount"),
                  controller: _billAmountController,
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  decoration: InputDecoration(
                      hintText: 'Enter the Bill Amount',
                      labelText: 'Bill Amount',
                      labelStyle: TextStyle(
                        fontSize: 25,
                        letterSpacing: 1,
                        fontWeight: FontWeight.bold
                      ),
                      fillColor: Colors.white,
                      border: new OutlineInputBorder(
                        borderRadius: new BorderRadius.circular(20.0),
                      ),
                    ),
                ),
                SizedBox(height: 25,),
                TextFormField(
                  key: Key("tipPercentage"),
                  controller: _tipPercentageController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    hintText: 'Enter the Tip Percentage',
                    labelText: 'Tip Percentage',
                    labelStyle: TextStyle(
                      fontSize: 25,
                      letterSpacing: 1,
                      fontWeight: FontWeight.bold
                    ),
                    fillColor: Colors.white,
                    border: new OutlineInputBorder(
                      borderRadius: new BorderRadius.circular(20.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

ここでは、keyboardType を割り当てています。ユーザーが入力フィールドをタップしたときに、必要なタイプのキーボードを表示できるようにするプロパティ。

InputDecoration を使用して入力フィールドのスタイルを設定できる装飾プロパティもあります。ウィジェット。

InputDecoration でウィジェットには、プレースホルダーテキストと入力の上のラベルを表示するのに役立ついくつかのプロパティがあります。 border も適用しました曲線の輪郭線を表示するプロパティ

ビルドして実行すると、エミュレータ画面に次の結果が表示されます:

ステップ 5:イベントリスナーと関数を追加する

ユーザーが請求額またはパーセンテージを入力するとすぐにチップ額を計算するため、テキスト入力フィールドの変更をリッスンする必要があります。

そのためには、addListener を使用してイベントリスナーをコントローラーに追加する必要があります。方法。

ここで、入力フィールドで変更が発生するとすぐに、特定の関数をトリガーして、請求額とチップの割合を更新したいと考えています。

そのために、setState で必要な関数を使用します。何らかの変更が発生するとすぐに UI 全体をレンダリングするのに役立つメソッド。

setState メソッドは build の再実行をトリガーしますメソッド。

以下のコードスニペットで、全体的なコーディングの実装を確認できます。

@override
void initState() {
  super.initState();
  _billAmountController.addListener(_onBillAmountChanged);
  _tipPercentageController.addListener(_onTipAmountChanged);
}

_onBillAmountChanged() {
  setState(() {
    _billAmount = double.tryParse(_billAmountController.text) ?? 0.0;
  });
}

_onTipAmountChanged() {
  setState(() {
    _tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0;
  });
}

ここに initState がありますメソッドも。このメソッドは、アプリのこの画面に入るとすぐに実行されます。そのため、画面に入るとすぐにイベントリスナーを追加します。

ステップ 6:金額セクションを追加する

UI ウィジェットに戻ります。列ウィジェット内の入力フィールドのすぐ下に金額セクションを追加します。

ここでは、SizedBox も使用します。これにより、ウィジェット間に必要なスペースを確保できます。以下のコードスニペットで、Amounts セクションのコーディング実装を確認できます。

),
SizedBox(height: 20,),
Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      Text("Tip Amount"),
      Text("Total Amount")
    ],
  ),
),

ここに Container があります必要なスタイルの装飾がいくつかあります。 child プロパティには別の Column があります 2 つの Text を持つウィジェット垂直に配置されたウィジェット。

ビルドして実行すると、エミュレータ画面に次の結果が表示されます:

チップの金額と合計金額を少しスタイリングして表示したいので。状態は含まれませんが、Stateful ウィジェットから渡された値に依存します。

AmountText の全体的なコーディング実装を見ることができます以下のコードスニペットのステートレスウィジェットクラス:

class AmountText extends StatelessWidget {
  final String text;

  const AmountText(
    this.text, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(text.toUpperCase(),
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)),
    );
  }
}

ここでは、コンストラクタークラスを使用して、表示される実際のテキストの値を取得しました。このクラスのビルドメソッドは Container を返しますシンプルな padding のウィジェットそして Text 子ウィジェットとしてのウィジェット。

AmountText以来ウィジェットの準備ができたので、ステートフルウィジェットでウィジェットを呼び出すことができます。

Column 内にウィジェットを追加します以前に単純な Text で定義したウィジェットウィジェット。 Text ウィジェットを AmountText に置き換えるだけです。ウィジェットを開き、必要なテキスト値を渡します。

以下のコードスニペットでコーディングの実装を確認できます:

Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      AmountText(
        'Tip Amount: ${_getTipAmount()}',
        key: Key('tipAmount'),
      ),
      AmountText(
        'Total Amount: ${_getTotalAmount()}',
        key: Key('totalAmount'),
      ),
    ],
  ),
),

ここでは、AmountText 内で関数を渡しています。ウィジェット。以下のコードスニペットに示すように、この関数はそれぞれのチップの金額と合計金額の値を返します。

  _getTipAmount() => _billAmount * _tipPercentage / 100;

  _getTotalAmount() => _billAmount + _getTipAmount();

最後に、ビューを終了するときにコントローラーを終了する必要があります。そのためには、組み込みの dispose を使用する必要があります関数。この関数は、現在の画面を終了するときに実行されます。

このメソッド内で、dispose でコントローラーを呼び出す必要があります入力テキストコントローラーを終了するためのメソッド。これにより、コントローラーは入力フィールドの変更をリッスンしなくなります。

以下のコードスニペットで dispose 関数を確認できます。

@override
void dispose() {
  // To make sure we are not leaking anything, dispose any used TextEditingController
  // when this widget is cleared from memory.
  _billAmountController.dispose();
  _tipPercentageController.dispose();
  super.dispose();
}

ビルドして実行すると、Tip Calculator の実装の最終結果が得られます。これは、以下のデモで確認できます。

入力フィールドの入力を変更すると、両方の金額の値が変化することに気付くでしょう。

これで、このチュートリアルは終了です。 Flutter フレームワークと Dart を使用して、簡単なチップ計算機を実装しました。

ここからどこへ行く?

このチュートリアルの主な目的は、単純な Tip Calculator を作成することで、Flutter アプリ開発フレームワークの基本的なプログラミングパターンを説明することでした。

探索できる興味深いウィジェットや追加機能が他にもたくさんあります。機能コンポーネントを同じに保ちながら、アプリの UI を変更できます。

全体として、Flutter はウィジェットパターンを使用して複雑な UI デザインをよりシンプルにします。子プロパティを使用してウィジェットを積み重ねるだけで、優れた UI を簡単に作成できます。

次のステップは、Flutter のナビゲーションメカニズムを使用して別の画面に移動することです。 Flutter は、カスタムドロワーメニューと下部タブの追加も簡素化します。

これは、Flutter 開発の出発点にすぎません。目に見える以上のものがあります。探求とコーディングを続ける必要があります。

プロジェクト全体のデモは Codepen で利用できます。

Flutter アプリのインスピレーションは、既に公開されている他のアプリから得ることができます。

ハッピーコーディング!

FacebookエンジニアからAndroidアプリを構築して公開する方法を学ぶ

Android Studio 4.0 – 最もエキサイティングなアップデートの説明

Windows PC で Grammarly を使用する方法
日常業務になんらかの形式のライティングが含まれる場合、文法、スペル、明瞭度などをチェックするタイピングアシスタントアプリは不可欠ではありません。実際、この時点で、それはほとんど必要です。 Grammarly は、そのような広く知られているライティングアシスタントの 1 つです。さらに、Grammarly は Windows 用のブラウザー拡張機能および Windows アプリとして利用できます。それでは、両方の方法で Windows で Grammarly を使用する方法を見てみましょう。 Windows で Grammarly を使用する方法 Windows ユーザーの場合、Gr
PC で Telegram を使用する方法
Telegram は、プライベートメッセージングの世界で気密性の高いセキュリティを備えた数少ないアプリの 1 つとして有名になりました。電話番号ではなく、新しい人とつながるためのユーザー名に依存しているため、自分の人生をプライベートに保ちたい人に人気の選択肢になっています.すべてが安全なプライベート通信で終わるわけではありませんが、ユーザーが物事を目立たなくするのに役立ちます. ユーザーベースが着実に増加しているため、一部のユーザーがデスクトップからテレグラムにアクセスしたいと考えていることは驚くことではありません.ありがたいことに、すべての一般的なメッセージングプラットフォームと同様に

Flutter を使用してチップ計算機を作成する方法

Flutter プロジェクトの設定方法

チップ計算機の UI を構築する方法

ステップ 1:アプリ バーをデザインする

ステップ 2:足場本体を設計する

ステップ 3:定数と変数を定義する

ステップ 4:入力フォーム フィールドを追加する

ステップ 5:イベント リスナーと関数を追加する

ステップ 6:金額セクションを追加する

ステップ 7:金額を表示する別のステートレス ウィジェットを作成する

ここからどこへ行く?

ステップ 1:アプリバーをデザインする

ステップ 4:入力フォームフィールドを追加する

ステップ 5:イベントリスナーと関数を追加する

ステップ 7:金額を表示する別のステートレスウィジェットを作成する