How to combine two conditions to define a widget's color property?

-1

I would like to change the color of "index == selectedIndex" in my drawer in connection with the switch between dark and light themes.

bool isDark = Theme.of(context).brightness == Brightness.dark;

Anybody knows a way to combine this :

decoration: BoxDecoration(
  color: isDark ? Color(0xFF000000) : Color(0xFFFFFFFF),
),

to

decoration: BoxDecoration(
  color: index == selectedIndex
    ? Color(0xFF000000)
    : Color(0xFFFFFFFF),
),

Pseudo code of what I try to achieve:

decoration: BoxDecoration(
  color: index == selectedIndex
    ? **color: isDark ? Color(0xFF000000) : Color(0xFFFFFFFF)**
    : **color: isDark ? Color(0xFF000000) : Color(0xFFFFFFFF),**
),
flutter
drawer
asked on Stack Overflow Feb 18, 2021 by ɢʜᴏsᴛ • edited Feb 19, 2021 by Thierry

2 Answers

0

Try this:

decoration: BoxDecoration(
                    color: index == selectedIndex
                        ? isDark ? Color(0xFF000000) : Color(0xFFFFFFFF)
                        : isDark ? Color(0xFF000000) : Color(0xFFFFFFFF),
answered on Stack Overflow Feb 18, 2021 by YoBo
0

Just combine nested ternary operators:

color: _selected
  ? _light
    ? Colors.green.shade100
    : Colors.green
  : _light
    ? Colors.red.shade100
    : Colors.red,

enter image description here

Full source code:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(
    ProviderScope(child: AppWidget()),
  );
}

class AppWidget extends HookWidget {
  const AppWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _light = useProvider(lightThemeProvider).state;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: _light
          ? ThemeData(
              accentColor: Colors.pink,
              brightness: Brightness.light,
              primaryColor: Colors.blue,
            )
          : ThemeData(
              accentColor: Colors.red,
              brightness: Brightness.dark,
              primaryColor: Colors.amber,
            ),
      home: HomePage(),
    );
  }
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _light = useProvider(lightThemeProvider).state;
    final _selected = useProvider(selectedProvider).state;
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Switch(
                  value: _light,
                  onChanged: (value) =>
                      context.read(lightThemeProvider).state = value,
                ),
                Text('LIGHT'),
              ],
            ),
            Row(
              children: [
                Switch(
                  value: _selected,
                  onChanged: (value) =>
                      context.read(selectedProvider).state = value,
                ),
                Text('SELECTED'),
              ],
            ),
            Expanded(
              child: Center(
                child: Container(
                  width: 50,
                  height: 50,
                  color: _selected
                      ? _light
                          ? Colors.green.shade100
                          : Colors.green
                      : _light
                          ? Colors.red.shade100
                          : Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

final lightThemeProvider = StateProvider<bool>((ref) => false);
final selectedProvider = StateProvider<bool>((ref) => false);
answered on Stack Overflow Feb 18, 2021 by Thierry

User contributions licensed under CC BY-SA 3.0