How To Set Up Gradiant Background Color In Flutter App

admin_img Posted By Bajarangi soft , Posted On 18-09-2020

We will be covering how to use gradients within Flutter.Flutter makes it easy to paint gradient decoration in to your mobile app even animating a gradient is so easy.

How to set up Gradiant background in flutter

Following is an Android UI screenshot when you run this application on an Android device.
Main.dart

//mainaxisalignment.star/ row


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Gradiant Design'),
        backgroundColor: Colors.black,
      ),
      body:
      Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                stops: [0.1, 0.3, 0.7, 1],
                colors: [Colors.pink, Colors.orange,Colors.white,Colors.green])
        ),
        child: Center(
          child: Text('Bajarngisoft.com',
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}

Related Post