NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. flutter
  3. Flutter ElevatedButtonの影の位置を変える

Flutter ElevatedButtonの影の位置を変える

Flutter ElevatedButtonの影の位置を変える

Flutterで、ElevatedButtonの影の位置を変える手順を記述してます。「styleFrom」で「elevation」に値を指定することで可能です。値が大きいほど深い場所に影ができます。

目次

環境

  • OS  windows11 pro 64bit
  • Flutter 3.3.1

影の位置を変える

影の位置を変えるには、「styleFrom」で「elevation」を設定します。

        child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.blue, //ボタンの背景色
            minimumSize: Size(150, 50), // ボタンのサイズ
            elevation: 20,
          ),
          child: const Text(
            "Button",
            style: TextStyle(
              color: Color.fromARGB(255, 255, 255, 255), // ボタンのテキストの色
              fontSize: 12,
            ),
          ),
        ),

これで「ElevatedButton」の影の位置が変わっていることが確認できます。

数値を大きくすると、より深い位置に影ができます。

elevation: 50