Search code examples
flutterflutter-layoutflutter-desktop

How to change the backgroundcolor in flutter (Desktop Application)?


I was trying to design a simple row and I want to change the background color

import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';


class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Container(
            height: 100,
            width: 1250, //I want to set the color here
            child: Row(
              children: [InfoLabel(label: 'label'), ], 
            ),
          )
        ],
      ),
    );
  }
}

Solution

  • For using on fluent_ui use

      Widget build(BuildContext context) {
        return FluentApp(
          theme: ThemeData(
            scaffoldBackgroundColor: Colors.red
          ),
        );
      }
    

    And to change on a specific page, wrap with FluentTheme

    return FluentTheme(
      data: FluentTheme.of(context).copyWith(
        scaffoldBackgroundColor: Colors.blue
      ),
      child: ScaffoldPage(
        
      ),
    );
    

    And For MaterialApp

    Use Scaffold's backgroundColor

    return Scaffold(
      backgroundColor: Colors.red
    );
    

    For Full app, you can provide on material theme

        MaterialApp(
          theme: ThemeData(
            backgroundColor: Colors.yellow,
          ),
    

    More about using themes