How can I change the drag handle color of a bottom sheet in Flutter

Question

I am trying to implement a bottom sheet. I used showModalBottomSheet. I need to change the drag handle color of that bottom sheet.

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

To change the handles color, the showModalBottomSheet essentially calls the BottomSheet class - which has a dragHandleColor, that:

Defaults to BottomSheetThemeData.dragHandleColor. If that is also null, defaults to ColorScheme.onSurfaceVariant.

So, you can set the theme and set the BottomSheetThemeData's 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'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}