[Date Range Picker] Appbar daterangepicker appear white?

# Discussion: [Date Range Picker] Appbar daterangepicker appear white?
hey i am new here. and i got to struggle on using daterangepicker provided by flutter.
so i testing with new default flutter main.dart and i add daterange, i am doing it to know is there is something wrong with my previews project. but i found out that the daterangepicker, the appbar still appear white. i dont get it why. also i try to run in on online ide, still it appear white. even if i use inherit theme/the default daterange

i think there is nothing crazy in this code

```
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
appBarTheme: AppBarTheme(
backgroundColor: Colors.deepPurple, // Set your preferred color here
foregroundColor: Colors.white, // Text/icon color
),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Pekerjaan Bulan:',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DateRangeWidget(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 6),
child: ElevatedButton(
onPressed: () async {
final DateTimeRange? pickedRange =
await pickDateRange(context);
if (pickedRange != null) {
print(
'Selected range: ${pickedRange.start} - ${pickedRange.end}');
}
},
child: const Text('Pick Date Range'),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}

Future pickDateRange(BuildContext context) async {
return await showDateRangePicker(
context: context,
firstDate: DateTime(2000),
lastDate: DateTime(2100),
builder: (BuildContext context, Widget? child) {
return Theme(
data: Theme.of(context).copyWith(
dialogBackgroundColor: Colors.blue,
textTheme: Theme.of(context).textTheme,
colorScheme: Theme.of(context).colorScheme.copyWith(
primary: Colors.deepPurple,
onPrimary: Colors.white,
surface: Colors.deepPurple[50],
onSurface: Colors.deepPurple[900],
),
),
child: child!,
);
},
);
}
}

class DateRangeWidget extends StatefulWidget {
DateRangeWidget({Key? key}) : super(key: key);

@override
State createState() => _DateRangeWidgetState();
}

class _DateRangeWidgetState extends State {
DateTimeRange dateRange = DateTimeRange(
start: DateTime(2021, 11, 5),
end: DateTime(2022, 12, 10),
);
@override
Widget build(BuildContext context) {
final start = dateRange.start;
final end = dateRange.end;

return Column(children: [
const Text(
'Date Range',
style: TextStyle(fontSize: 16),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: ElevatedButton(
child: Text(
'${start.year}/${start.month}/${start.day}',
),
onPressed: pickDateRange,
),
),
Container(
margin: EdgeInsets.only(left: 20),
child: ElevatedButton(
child: Text(
'${end.year}/${end.month}/${end.day}',
),
onPressed: pickDateRange,
),
),
],
)
]);
}

Future pickDateRange() async {
DateTimeRange? newDateRange = await showDateRangePicker(
context: context,
initialDateRange: dateRange,
firstDate: DateTime(2019),
lastDate: DateTime(2023),
);
setState(() {
dateRange = newDateRange ?? dateRange;

// if (newDateRange == null) return;
// setState(() => dateRange = newDateRange);
});
}
}
```