Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set a different theme for a screen?

Tags:

flutter

dart

I created the Friendly Chat app and want to add a new screen with a different theme but it doesn't work :-(

The whole app has a Brightness.dark theme:

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    print("build MaterialApp");
    return new MaterialApp(
      title: 'Friendly Chat',
      theme: kTheme,
      home: new ChatScreen(),
      routes: <String, WidgetBuilder>{
        SettingsScreen.PATH: (BuildContext context) => new SettingsScreen()
      },
    );
  }
}

final ThemeData kTheme = new ThemeData(
  primarySwatch: Colors.indigo,
  primaryColor: Colors.indigoAccent[100],
  primaryColorBrightness: Brightness.dark,
);

When the user clicks a button I push the settings screen:

Map results = await Navigator.of(context).pushNamed(SettingsScreen.PATH);

In the settings screen I change the AppBar's backgroundColor and brightness but the new/different brightness has no effect (changing the backgroundColor works)

class SettingsScreen extends StatefulWidget {

  @override
  State createState() => new SettingsScreenState();
}

class SettingsScreenState extends State<SettingsScreen> {

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: _onWillPop,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("Settings"),
          backgroundColor: Colors.amberAccent[700],
          brightness: Brightness.light,
        ),
      ),
    );
  }
}

How can I change the settings screen AppBar theme to a light one?

EDIT

At the end I want:

  • all screens have a dark AppBar background color with white title and icons

  • settings screen (only) has a light AppBar background color with dark title and icons

Bonus points: How to set a different theme for the whole screen and not only for the AppBar

like image 837
Ralph Bergmann Avatar asked Jan 24 '18 13:01

Ralph Bergmann


People also ask

How to set themes in Windows 10?

A theme is a collection of backgrounds and sounds, along with an accent color and mouse pointer style. [1] [2] Windows 10 allows you to set themes, and it's much simpler and easier than previous editions. Start by reading step 1. Open your personalization settings. Download Article Right-click the desktop and select Personalize.

How do I quickly switch to a new theme?

Here you can quickly switch to a theme by clicking a thumbnail in the “Click a theme to apply” section near the top of the window. This is a great way to quickly switch between a light mode theme (with a light background and light windows) and a dark mode theme (with dark colors), for example.

How to change lock screen theme in Windows 10?

9.You can also choose the apps you want on your lock screen. 1.Press Windows Key + I to open Settings then click on Personalization icon. 2.Now from the Personalization window click on Themes from the left window pane. 3.You can make your custom theme by selecting the background, color, sounds, and color of your choice.

Is it possible to set two different themes on dual monitors?

It is possible to set two diffrent back ground wallpaper on dual monitors but it is not possible to set two different themes on dual monitors. You can change the background wallpaper of the monitors. Refer to the stpes given here. Refer section: " Multi-monitor desktop background personalization"


1 Answers

You can override the current theme by wrapping the desired widget in a Theme widget

Typically you'd have something similar to :

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final AppBar appBar;

  CustomAppBar(): appBar = new AppBar();

  @override
  Widget build(BuildContext context) {
    return new Theme(
      child: appBar,
      data: new ThemeData.dark()
    );
  }

  @override
  Size get preferredSize => appBar.preferredSize;
}

Had to make a custom class because Scaffold requires a PreferredSizeWidget.

EDIT

To answer your "Bonus Point", it's dead simple.

Instead of wrapping the AppBar in a Theme, wrap the Scaffold instead.

like image 76
Rémi Rousselet Avatar answered Oct 03 '22 23:10

Rémi Rousselet