flutterdartbottom-sheet

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


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"),
      ),
    ),
  );



Solution

  • enter image description here

    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'),
                    ),
                  ),
                );
              },
            ),
          ),
        );
      }
    }