CODEWITHSUNDEEP
flutterdart
MoofinTheExplorer
MoofinTheExplorer

Reputation: 21

Flutter ColorScheme class Background color not showing in scaffold

My code is:

import 'package:flutter/material.dart';

void main() => runApp(BMICalculator());

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = ThemeData();

    return MaterialApp(
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(
          secondary: Colors.purple,
          primary: Color(0xFF0d0f1e),
          background: primaryC,
        ),
      ),
      home: InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Center(
        child: Text('Body Text'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
      ),
    );
  }
}

And I have no idea why the background color of my app won't turn into the black/purple color I have set for it. I am following a tutorial that was using the depricated theme: ThemeData but I can't find the reason why my background color isn't changing for the scaffold.

Upvotes: 2

Views: 2700

Answers (1)

MendelG
MendelG

Reputation: 20008

To set a background color for your Scaffold, you can set the scaffoldBackgroundColor in your ThemeData.

Using your example:

import 'package:flutter/material.dart';

void main() => runApp(BMICalculator());

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = ThemeData();

    return MaterialApp(
      theme: theme.copyWith(
        // Pick the color here
        scaffoldBackgroundColor: Colors.black,
        colorScheme: theme.colorScheme.copyWith(
          secondary: Colors.purple,
          primary: Color(0xFF0d0f1e),
        ),
      ),
      home: InputPage(),
    );
  }
}

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: Center(
        child: Text('Body Text'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

Upvotes: 3

Related Questions