Flutter set ThemeData background to LinearGradient

Question

Is there a way to set the backgroundColor of ThemeData class to a LinearGradient? My app will be changing between different themes and I want that each theme to have a different gradient. I tried setting the LinearGradient to backgroundColor but gave me a The argument type 'LinearGradient' can't be assigned to the parameter type 'Color'. error.

this is what I tried

final _darkTheme = ThemeData(
    primarySwatch: Colors.grey,
    primaryColor: Colors.black,
    brightness: Brightness.dark,
//    backgroundColor: const Color(0xFF212121),
    backgroundColor: const LinearGradient(colors: [Colors.blue, Colors.green]),
    accentColor: Colors.white,
    floatingActionButtonTheme:
        FloatingActionButtonThemeData(foregroundColor: Colors.black),
    dividerColor: Colors.black12,
);

Any suggestions? I do not want to set each container manually or have an extra constants class to somehow associate with each theme.

Answer 1

I could achieve this by defining primary color and secondary color in the colorScheme of a custom theme class.

class AppTheme {
  AppTheme._();

  static final ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.green,
    accentColor: Colors.purple[300],
    scaffoldBackgroundColor: Colors.grey[100],
    colorScheme: ColorScheme.light(
      primary: Colors.green,
      secondary: Colors.green[100],
    ),
  );

  static final ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.green,
    accentColor: Colors.purple[300],
    colorScheme: ColorScheme.dark(
      primary: Colors.green[800],
      secondary: Colors.green[600],
    ),
  );
}

In the custom button widget, I will set primary as gradient start color and secondary as gradient end color, like this:

child: RaisedButton(
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
  padding: EdgeInsets.all(0.0),
  child: Ink(
    decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Theme.of(context).colorScheme.primary,
            Theme.of(context).colorScheme.secondary,
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        borderRadius: BorderRadius.circular(30.0)),
    child: Container(
      constraints: BoxConstraints(minHeight: 50.0),
      alignment: Alignment.center,
      child: Text(
        title,
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
  onPressed: () {},
),

Finally, this is what I got: