BoxDecorationとGradientAppBarを使用してFlutterでグラデーションを使用する方法

序章

カラーグラデーションは、開始色と位置、および終了色と位置を取ります。 次に、色間の遷移を実行します。 色彩理論を考慮すると、単純なデザインよりも視覚的に面白いアプリケーションにすることができます。

この記事では、BoxDecorationの LinearGradientおよびgradient_app_barパッケージを使用して、Flutterアプリケーションにグラデーションを適用します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Flutterをダウンロードしてインストールします。
• Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
• コードエディタ用のプラグインをインストールすることをお勧めします。 AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。

このチュートリアルは、Flutter v1.22.2、Android SDK v30.0.2、およびAndroidStudiov4.1で検証されました。

ステップ1—プロジェクトの設定

Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

flutter create flutter_gradient_example

新しいプロジェクトディレクトリに移動します。

cd flutter_gradient_example

flutter createを使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。

ステップ2—LinearGradientを使用する

コードエディタでmain.dartを開き、コードを変更してBoxDecorationを追加します。

lib / main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                Colors.blue,
                Colors.red,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

これの鍵は、decorationとBoxDecorationをContainerウィジェットに追加することです。 これにより、colorsに加えて、beginおよびendAlignmentを指定できるLinearGradientを定義できます。

コードをコンパイルして、エミュレーターで実行します。

これにより、画面の上部から青で始まり、画面の下部で徐々に赤に変化する線形グラデーションが作成されます。

ステップ3—stopsとLinearGradientの使用

また、追加の色を使用して、画面上のどこで色の遷移を有効にするかをより細かく制御することもできます。

コードエディタでmain.dartに戻り、stopsを追加します。

lib / main.dart

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              stops: [
                0.1,
                0.4,
                0.6,
                0.9,
              ],
              colors: [
                Colors.yellow,
                Colors.red,
                Colors.indigo,
                Colors.teal,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

コードをコンパイルして、エミュレーターで実行します。

これにより、画面の0.0から始まり、画面の0.4で赤に遷移し、次に0.6で線形グラデーションが作成されます。画面の下の方でインディゴに移行し、次に画面の下の1.0でティールに移行します。

ステップ4—GradientAppBarを使用する

BoxDecorationはAppBarには適用されません。 ただし、GradientAppBarパッケージを使用して、AppBarにカラーグラデーションを追加することは可能です。

コードエディタでpubspec.yamlを実行し、gradient_app_barを追加します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  gradient_app_bar: ^0.1.3

次に、main.dartに再度アクセスし、gradient_app_barのインポートを追加します。

lib / main.dart

import 'package:flutter/material.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';

最後に、AppBarをGradientAppBar以降の色に置き換えることができます。

lib / main.dart

appBar: GradientAppBar(
  title: Text('Flutter Gradient Example'),
  gradient: LinearGradient(
    colors: [
      Colors.cyan,
      Colors.indigo,
    ],
  ),
),

この例では、シアンとインディゴのLinearGradientを使用します。

注：以前のバージョンのGradientAppBarは、バージョン0.1.0で廃止されたbackgroundColorStartおよびbackgroundColorEndを使用していました。

コードをコンパイルして、エミュレーターで実行します。

これにより、画面の左側からシアンで始まり、画面の右側で徐々に藍色に変化する線形グラデーションが作成されます。

結論

この記事では、LinearGradientとGradientAppBarを使用してFlutterアプリケーションにグラデーションを適用しました。

Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。