如何更改 Flutter 中底部工作表的拖动手柄颜色

Question

我正在尝试实现底部工作表。我使用了 showModalBottomSheet。我需要更改底部工作表的拖动手柄颜色。

showModalBottomSheet(
                context: context,
                showDragHandle: true,
                backgroundColor: Colors.transparent,
                builder: (context) => Container(
                  height: screenHeight * 0.25,
                  width: screenWidth,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(25.0),
                      topRight: Radius.circular(25.0),
                    ),
                  ),
                  child: const Center(
                    child: Text("Modal content goes here"),
                  ),
                ),
              );

---

---

Answer 1

要更改手柄颜色，

showModalBottomSheet

本质上调用

BottomSheet

类 - 它有一个

dragHandleColor

，即：

默认为 BottomSheetThemeData.dragHandleColor。如果它也为 null，则默认为 ColorScheme.onSurfaceVariant。

所以，您可以设置

theme

并设置

BottomSheetThemeData

的

drageHandleColor

：

MaterialApp(
        home: MyApp(),
        theme: ThemeData(
          bottomSheetTheme: BottomSheetThemeData(
            dragHandleColor: Colors
                .pink, // --> This will change the color of the drag handle
          ),
        ),
      ),

---

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: MyApp(),
        theme: ThemeData(
          bottomSheetTheme: BottomSheetThemeData(
            dragHandleColor: Colors
                .pink, // --> This will change the color of the drag handle
          ),
        ),
      ),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: TextButton(
          child: Text('Show Bottom Sheet'),
          onPressed: () {
            showModalBottomSheet(
              showDragHandle: true,
              context: context,
              builder: (context) => Container(
                child: Center(
                  child: Text('Bottom Sheet'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}