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