Home > Software engineering >  How to change the backgroundcolor in flutter (Desktop Application)?
How to change the backgroundcolor in flutter (Desktop Application)?

Time:08-11

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'), ], 
            ),
          )
        ],
      ),
    );
  }
}

CodePudding user response:

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

CodePudding user response:

Immediately below return Scaffold(, add backgroundColor: Colors.black,.

Or if you just want the Row having a background color, wrap it with a Container and set it there.

CodePudding user response:

try this

 body: Row(
        children: [
          Container(
            height: 100,
            width: MediaQuery.of(context).size.width,
            color: Colors.red,
            child: Row(
              children: [
                Text("Data")
              ],
            ),
          )
        ],
      ),
  • Related