CODEWITHSUNDEEP
flutterdartflutter-layoutbackground-colorflutter-design
Lansen Portan
Lansen Portan

Reputation: 161

How to use images and other views as a backgrounds in Flutter

What is the possible way to set up my background like this:

this app

This color is what I am using in my app

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        backgroundColor: Color(0xff00BCD1),
        appBar: AppBar(
          title: Text('Flutter Screen Background Color Example'),
        ),
        body: Center(child: Body()),
      ),
    );
  }
}

Any advice will be appreciated.

Upvotes: 1

Views: 170

Answers (1)

user12195344
user12195344

Reputation:

you gotta use gradient

Container(
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xff5a6c92), Color(0xff252b37)],
    ),
  ),
),

see this if this answer is not clear for you https://www.digitalocean.com/community/tutorials/flutter-flutter-gradient

and if you wanna use this as a background use the Stack widget to do that

Stack(
  fit: StackFit.expand,
  children: [
    Container(
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Color(0xff5a6c92), Color(0xff252b37)],
        ),
      ),
    ),
    Otherwidgets(),
    Otherwidgets(),
    Otherwidgets(),
    Otherwidgets(),
  ],
),

read more about stack https://api.flutter.dev/flutter/widgets/Stack-class.html

Upvotes: 2

Related Questions