點燈坊

失くすものさえない今が強くなるチャンスよ

ElavatedButton 顯示突起的 Button

Sam Xiao's Avatar 2024-10-21

ElavatedButton 可顯示突起的 Button。

Version

Flutter 3.24

Flutter

overview01

  • Android 與 iOS 都成功使用 ElavatedButton 顯示突起的 button

ElavatedButton

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('ElevatedButton'),
    );

    var elevatedButton = ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('ElevatedButton Pressed!'),
          ),
        );
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      child: const Text(
        'Press Me',
        style: TextStyle(fontSize: 18, color: Colors.white),
      ),
    );

    var body = Center(
      child: elevatedButton,
    );

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 12

var elevatedButton = ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('ElevatedButton Pressed!'),
      ),
    );
  },
  child: const Text(
    'Press Me',
     style: TextStyle(fontSize: 18, color: Colors.white),
  ),
);
  • onPressed()：當按下時所觸發的 event
  • child：設定 ElavatedButton 的 widget，通常是 Text
    • Text：ElavatedButton 內所顯示的文字
      • style：由 TextStyle 設定 Text 的 style

Line 20

style: ElevatedButton.styleFrom(
  backgroundColor: Colors.blue,
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
);
  • style：由 ElevatedButton.styleFrom() 設定 ElavatedButton 的 style
    • backgroundColor：設定背景顏色
    • padding：設定內部 padding
    • shape：設定圓角

Conclusion

  • Elevated 的意思是 被提升的 或 升起的。在 Flutter 中，ElevatedButton 是一種 帶有陰影和浮起效果 的按鈕
  • ElavatedButton 內的 padding 可直接在 style 內設定，不需要搭配其他 widget

# Flutter