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を追加します。

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を追加します。

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を追加します。

dependencies:
  flutter:
    sdk: flutter

  gradient_app_bar: ^0.1.3

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

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

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

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

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

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

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

結論

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

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