Changing the TaskDescription bar color with Flutter

Question

Is there a way to change the TaskDescription bar color in a Flutter app?

Here is a link to what I am trying to achieve.

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

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

  @override
  Widget build(BuildContext context) {

    // Change the status bar color
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'SMS 2 Server',
      color: Colors.white,
      theme: ThemeData(
        //brightness: Brightness.light,
        primarySwatch: primaryWhite,

        inputDecorationTheme: InputDecorationTheme(

        )
      ),
      home: HomePage(),
    );
  }
}

Solution 1

This is not something that Flutter handles. You have to do it from the Android side.

For changing the TaskDescription color of your app, you have to do this in your MainActivity (my example is using Kotlin, but is almost the same with Java).

// Import TaskDescription
import android.app.ActivityManager

class MainActivity: FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    GeneratedPluginRegistrant.registerWith(this)

    // Change the color (it's not available on versions before Lollipop)
    Timer("ChangingTaskDescriptionColor", false).schedule(1000) {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      val taskDescription = ActivityManager.TaskDescription(null, null, Color.RED)
      setTaskDescription(taskDescription)
    }
  }
}

Remember to define the color on your colors.xml.

This changes the bar color. You can also set a custom title and icon. But the text color is automatically setted by Android (black or white only).

More information on TaskDescription here

PS: Keep in mind this is something that is not longer available on Android P (don't remember Oreo) as it only shows an Icon. So you should test this on newer versions to be sure it doesn't crash. Maybe check if the API <= than something too.

UPDATE

After trying to make this work on Flutter, I came to the conclusion that the TaskDescription is being override on some point after the first onResume() lifecycle method call. So the only way I could get the result we need, is to use a delay.

Also, it didn't accept the color value from xml, so I've ended using android.graphics.Color.

I've update my code example to show you what I did. And here's the result!

Solution 2

you can do like this

Scaffold(
      appBar: new AppBar(
        backgroundColor: new Color(Color you want),
      ),
    );

or

  theme: ThemeData(
   primaryColor: YourExpected Color,
   )

Solution 3

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       // put the color in here
        color: Colors.red,
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Home(),
        ),
      ),
    );
  }
}

Go to the main. dart file and add your color in color attribute under MaterialApp widget

Comments

[akshay_shahane]

can you post code?

[JideGuru]

Try to remove the primarySwatch and replace with primaryColor

[Kelvin]

It did not work, it only changed the appbar to blue.

[Kelvin]

@OneLuch, the edit you made is not what I'm looking for, I want to change the color of my app title bar not AppBar color, I understand the difference between both, please check this link so you can understand what I am looking for. From the link you can see that chrome is having a white title bar while whatsapp is having a dark green title bar. Title bar is the bar that shows up when you tap on the button that shows all the apps that are running on android. Thanks

[GaboBrandX]

@KelvinROLEX Ok now I see what you need. You need to change the TaskDescription bar color.

[Kelvin]

@GaboBrandX yes exactly...

[Kelvin]

It didn't work, instead the app bar color was changed. Please look at the image link in the question.

[Kelvin]

I am not talking about the appbar, what i want is to change the title bar color, please check the link to the image in the question.

[mjhansen3]

Do send an image of what you have so far, perhaps I can clearly understand you because it looks like the image in the question isn't conveying the message you want to send across.

[Kelvin]

OK here is the link when the app is opened link, then here is another link to when you tap on that android button that shows you all the apps that are running link, as you can see on this link chrome is having a white title bar color while whatsapp is having a dark green title bar but sms 2 server is having the default color of android title bar, I want to change it from that default color to any color I want.

[mjhansen3]

I understand you now ... I have no solution yet, I will post one when I do.

[Sergio Bernal]

why are you using this FlutterStatusbarcolor.setStatusBarColor(Colors.white);?

[GaboBrandX]

@KelvinROBLEX I've improved my answer to make it more complete. Both ways I've suggested works. :)

[Kelvin]

To set the status bar color to white.

[Kelvin]

What I am looking for is not to change the AppBar or text color, I want to change the Title Bar color of the app.

[GaboBrandX]

@KelvinROLEX I've modified my answer, now that it's clear what you need ;)

[Kelvin]

i tried the Java version of the code and it did not work too. Thanks for your help, Its like flutter app doesn't support the change of TaskDescription bar color.

[GaboBrandX]

You're right. I've just tested this, and this doesn't works with FlutterActivity... I'll look into this in more depth tomorrow. I'll let you know if I find anything.

[GaboBrandX]

@KelvinROLEX Hi, I'm sorry for being late, I've been busy at work. I experimented with this today, and updated my answer. I know it might not be the best solution as it is a sort of hack, but it works! :D

[Kelvin]

Thanks @gabobrandx, I will try it out.