Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Failed assertion: line 24 pos 15: 'color != null && color.alpha == 0xFF': is not true

When ever the Opacity in RGBO block is 1, it works fine. However, if i try to incease or decrease the opacity in primary color, it throws an error in Flutter

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Savay',
      theme: ThemeData(
          fontFamily: 'sen',
          primaryColor: Color.fromRGBO(49, 67, 89, 0.8),
          accentColor: Color.fromRGBO(248, 248, 248, 1)),
      home: Filters(),
    );
like image 971
Ashish Das Avatar asked May 15 '20 07:05

Ashish Das


2 Answers

As previously mentioned in the comments, colors set in theme should always be opaque. You may want to individually set color opacity to your Widgets individually. Aside from using Colors.fromRGBO, you can also set the opacity using Colors.{COLOR}.withOpacity(0.5).

like image 131
Omatt Avatar answered Oct 01 '22 10:10

Omatt


i got this error why trying to convert rgba to argb, but I solved it with this code

 int hexOfRGBA(int r,int g,int b,{double opacity=1})
 {
  var  value=((((opacity * 0xff ~/ 1) & 0xff) << 24) |
   ((r                    & 0xff) << 16) |
   ((g                    & 0xff) << 8)  |
   ((b                    & 0xff) << 0)) & 0xFFFFFFFF;
  return value;
 }

I got that from here https://api.flutter.dev/flutter/dart-ui/Color/Color.fromRGBO.html I think you can pass your rgbo into an hex value and add it as a material color to theme data like so

first, create a map for your material color

   Map<int, Color> color =
  {
    50:primaryColor.withOpacity(0.1),
    100:primaryColor.withOpacity(0.2),
    200:primaryColor.withOpacity(0.3),
    300:primaryColor.withOpacity(0.4),
    400:primaryColor.withOpacity(0.5),
    500:primaryColor.withOpacity(0.6),
    600:primaryColor.withOpacity(0.7),
    700:primaryColor.withOpacity(0.8),
    800:primaryColor.withOpacity(0.9),
    900:primaryColor.withOpacity(1.0),
  };

where the primaryColor =Color.fromRGBO(49, 67, 89, 0.8); // one of the color in your theme data, then create a function to convert it to hex code

    int hexOfRGBA(int r,int g,int b,{double opacity=1})
 {
  var  value=((((opacity * 0xff ~/ 1) & 0xff) << 24) |
   ((r                    & 0xff) << 16) |
   ((g                    & 0xff) << 8)  |
   ((b                    & 0xff) << 0)) & 0xFFFFFFFF;
  return value;
 }

now instead of passing the rgbo code directly pass each rgbo as a material color like so

theme: ThemeData(
             primarySwatch: MaterialColor(hexOfRGBA(49, 67, 89,  opacity:0.8),color )
            ),

where the color, is the map of color we created early on and the hex color is from the function, and the rgbo inside is the rgbo we put in the map. you can do this for both of your color and pass them as material color instead of rgbo into the theme data

like image 22
Komolafe Ezekiel dare Avatar answered Oct 01 '22 10:10

Komolafe Ezekiel dare