CODEWITHSUNDEEP
dartflutter
rafaelcb21
rafaelcb21

Reputation: 13304

Flutter - Changing the color of the appbar is not working

I am trying to change the background color of AppBar but it is not working.

When choosing the color 0x673AB7 according to the image below, AppBar turns gray instead of purple.

import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Controlle Financeiro",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: new Color(0x673AB7),
      ),
    );
  }
}

enter image description here

Upvotes: 7

Views: 13009

Answers (2)

Blasanka
Blasanka

Reputation: 22417

As @Randal mentioned you are using the hex code without alpha value. If you did not specify it, it will be complete transparent. So, you can use first two values as alpha and other six for RGB.

Have a look at Color class source code. There is a comment like below:

  /// Construct a color from the lower 32 bits of an [int].
  ///
  /// The bits are interpreted as follows:
  ///
  /// * Bits 24-31 are the alpha value.
  /// * Bits 16-23 are the red value.
  /// * Bits 8-15 are the green value.
  /// * Bits 0-7 are the blue value.
  ///
  /// In other words, if AA is the alpha value in hex, RR the red value in hex,
  /// GG the green value in hex, and BB the blue value in hex, a color can be
  /// expressed as `const Color(0xAARRGGBB)`.
  ///
  /// For example, to get a fully opaque orange, you would use `const
  /// Color(0xFFFF9000)` (`FF` for the alpha, `FF` for the red, `90` for the
  /// green, and `00` for the blue).

Upvotes: 2

Randal Schwartz
Randal Schwartz

Reputation: 44046

It looks like your color is completely transparent. Try changing the color to 0xFF673AB7

Upvotes: 6

Related Questions