CODEWITHSUNDEEP
flutter
legacyO7
legacyO7

Reputation: 533

Flutter : Change accent color on runtime

How to change accent color on runtime in flutter?

Color scolor = Colors.green;
...
...
new MaterialApp(

      theme: new ThemeData(
        brightness: Brightness.light,
        accentColor:  scolor,
        ),
 home: new SetAccentColor());


class SetAccentColor extends StatefulWidget {
  @override
  _SetAccentColor createState() => _SetAccentColor();
}

class _SetAccentColor extends State<SetAccentColor > {
...
...
@override
  Widget build(BuildContext context) {
 return Scaffold(
        body: Builder(
            builder: (context) => Container(
                  child: FutureBuilder<List<ColorDBModel>>(
                          future: ColorDBProvider.db.getAllColorModels(),
                          builder: (BuildContext context, AsyncSnapshot<List<ColorDBModel>> snapshot) {

 if (snapshot.data[0].ColorName == "red")
scolor = Colors.red;
else 
scolor = Colors.blue;
...
...
...
}
}
}

These are the important parts of the code. But accentColor isnt changing according to the changes in scolor.

Upvotes: 1

Views: 2449

Answers (2)

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27147

you can do using provider package easily.

Make sure you add package in pubspec.yaml file.

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

class ThemeChange extends ChangeNotifier {
  Color accentColor = Colors.green;
  void changeColor(Color color) {
    this.accentColor = color;
    notifyListeners();
  }
}

void main() {
  // for bloc transition trace
  //BlocSupervisor.delegate = SimpleBlocDelegate();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemeChange>(
      create: (context) => ThemeChange(),
      child: Consumer<ThemeChange>(builder: (context, themechange, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(accentColor: themechange.accentColor),
          initialRoute: '/',
          home: Scaffold(body: HomeWidget()),
        );
      }),
    );
  }
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: RaisedButton(
            onPressed: () {
              Provider.of<ThemeChange>(context, listen: false)
                  .changeColor(Colors.teal);
            },
            child: Text("change accent color"),
            color: Provider.of<ThemeChange>(context).accentColor,
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Alexandre
Alexandre

Reputation: 142

Use the setState to rebuild the widget with the new color. This will work with a StatefulWidget.

onPressed: () {
  setState(() {
    scolor = Colors.red;
  });
}

Upvotes: 0

Related Questions