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

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

CodePudding user response：

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(),
        ),
      ),
    );

CodePudding user response：

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

CodePudding user response：

You can use like this with container...

Container(
  decoration: BoxDecoration(
    gradient: myGradient
  ),
);