Question 78964 in Flutter Question posted in
The official Flutter documentation can be found here.

How can i use a Gradient Color for a backgroundColor or other normal Color properties in Flutter..?

suppose i want to use this gradient color

final myGradient = LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomLeft,
    colors: [
      const Color(0xFFF8A150).withOpacity(0.09),
      const Color(0xFFF15B2C).withOpacity(0.98)
    ]);

actually i want to do this like

backgroundColor = myGradient

instead of
backgroundColor: Colors.red

can i use this use this with out Container

Tags:

3

Answers


  1. 0

    You can use like this with container…

    Container(
  decoration: BoxDecoration(
    gradient: myGradient
  ),
);
    Login or Signup to reply.
  2. 0

    To change the gradient of the app from the top of the appbar to the end of the screen, just wrap your scaffold with a decorated container and add backgroundColor: Colors.transparent.withOpacity(0) to your scaffold and all scaffolds children like the appbar or bottomNavbar. You need a container to add gradient colors to your scaffold. Scaffold’s backgroundColor parameter does not accept any LinerGradient.

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.blue, Colors.red],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent.withOpacity(0),
          appBar: AppBar(
            backgroundColor: Colors.transparent.withOpacity(0),
            title: const Text("Test"),
          ),
          body: Home(),
        ),
      ),
    );
    Login or Signup to reply.
  3. 0

    Try below code I think Without Container you don’t apply Gradient Color Refer LinearGradient

    Your color declaration:

    final myGradient = LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomLeft,
    colors: [
      const Color(0xFFF8A150).withOpacity(0.09),
      const Color(0xFFF15B2C).withOpacity(0.98)
    ]);

    Your Widget:

    Container(
        decoration: BoxDecoration(
          gradient: myGradient,
        ),
        child: const Center(
          child: Text(
            'Gradient Color Background',
            style: TextStyle(
              fontSize: 40,
            ),
          ),
        ),
      ),

    Result Screen-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search