Change showCupertinoModalBottomSheet background Color dynamically Flutter

user_18739912 0
Viewed 241

I am trying to implement a showCupertinoModalBottomSheet for the theme selection of my app.

But while switching the theme, the overall app theme changes except for the current showCupertinoModalBottomSheet in which the themes are listed.

Is there a way to change it's colour dynamically? Or is there any other Widget which can help me implement this?

 text: 'Change theme',
      onPressed: () => showCupertinoModalBottomSheet<Widget>(
          context: context,
          bounce: true,
          expand: false,
          backgroundColor: themeProvider.currentTheme == THEME_DARK
              ? Colors.grey[800]
              : Colors.white,
          builder: (BuildContext context) => _AppPersonalization()),
flutter-widget flutter-layout dart flutter
1 Answers

The showCupertinoModalBottomSheet widget was not found, but if you imported modal_bottom_sheet from pub.dev, the solution is ^^

backgroundColor: Theme.of(context).[primaryColor/accentColor...]

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

ValueNotifier<Brightness> brightness = new ValueNotifier(Brightness.light);

void main() {
  runApp(ValueListenableBuilder(
      valueListenable: brightness,
      builder: (context, Brightness _brightness, _) {
        return MaterialApp(
            theme: _brightness == Brightness.dark ? ThemeData(
              primaryColor: Colors.black,
              brightness: Brightness.dark,
            ) : ThemeData(
              primaryColor: Colors.white,
              brightness: Brightness.light,
            ),
            home: const HomePage()
        );
      }
      )
  );
}



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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


  @override
  Widget build(BuildContext context) {
    return  Scaffold(
       backgroundColor: Theme.of(context).primaryColor,
      body: Center(
        child: ElevatedButton(
          child: Text('Change theme'),
          onPressed: () {
            brightness.value = brightness.value ==Brightness.light ? Brightness.dark : Brightness.light;
            brightness.notifyListeners();
            showMaterialModalBottomSheet<Widget>(
              context: context,
              builder: (_) => Container(height: 300,color: Theme.of(context).primaryColor),
            ).catchError((onError) => print("$onError"));
          },
        ),
      ),
    );
  }
}
user_163497700
Related