I would like to change the background color of the datatable's checkboxes.

Exemple

I want to go from this:

to this (it's a drawing):

Is it possible to change it from theme?

EDIT 1:

I already tried checkboxTheme, It will only change the border from white to my color. But I just want to change the fill color.

my checkbox theme is:

CheckboxThemeData(fillColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
    if (states.contains(MaterialState.selected))
        return primaryColor;
    return null;
})),

But my datatable's checkbox still blue while Checkbox's widget changed color...

(the bottom's checkbox is from checkbox widget, for comparison)

CodePudding user response：

Here is an attempt to recreate the checkbox theme:

CheckboxThemeData(
  side: MaterialStateBorderSide.resolveWith(
      (_) => const BorderSide(width: 1, color: Colors.blue)),
  fillColor: MaterialStateProperty.all(Colors.red),
  checkColor: MaterialStateProperty.all(Colors.white),
),

Try it out using:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool checked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        checkboxTheme: CheckboxThemeData(
          side: MaterialStateBorderSide.resolveWith(
              (_) => const BorderSide(width: 1, color: Colors.blue)),
          fillColor: MaterialStateProperty.all(Colors.red),
          checkColor: MaterialStateProperty.all(Colors.white),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Checkbox(
            value: checked,
            onChanged: (b) {
              setState(() {
                checked = b ?? false;
              });
            },
          ),
        ),
      ),
    );
  }
}

Edit: After doing some digging, I found that the DataTable uses ThemeData.colorScheme.primary as the fill color.

Try this:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool checked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        colorScheme: ThemeData.light().colorScheme.copyWith(
              onPrimary: Colors.white, // Color for checkmark in datatable
              primary: Colors.red, // Color used for checkbox fill in datatable
            ),
        checkboxTheme: CheckboxThemeData(
          side: MaterialStateBorderSide.resolveWith(
              (_) => const BorderSide(width: 1, color: Colors.blue)),
          fillColor: MaterialStateProperty.all(Colors.red),
          checkColor: MaterialStateProperty.all(Colors.white),
        ),
      ),
      home: Scaffold(
        body: DataTable(
          columns: const [
            DataColumn(label: Text('Checkbox')),
          ],
          rows: [
            DataRow(
              selected: checked,
              onSelectChanged: (b) {
                setState(() {
                  checked = b ?? false;
                });
              },
              cells: const [
                DataCell(Text('hi')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

import 'package:flutter/material.dart';

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

class Example_App extends StatefulWidget {
  const Example_App({Key? key}) : super(key: key);
  @override
  _Example_AppState createState() => _Example_AppState();
}

class _Example_AppState extends State<Example_App> {
  bool checked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        checkboxTheme: CheckboxThemeData(
          side: MaterialStateBorderSide.resolveWith(
              (_) => const BorderSide(width: 1, color: Colors.blue)),
          fillColor: MaterialStateProperty.all(Colors.red),
          checkColor: MaterialStateProperty.all(Colors.white),
        ),
      ),

      home: Scaffold(
        body: Center(
          child: Checkbox(
            value: checked,
            onChanged: (b) {
              setState(() {
                checked = b ?? false;
              });
            },
          ),
        ),
      ),
    );
  }
}