Nilen Patel Inc.

Tutorial and code of  Gradient Container in Flutter. Copy and paste the below code as per your requirements.

import 'package:flutter/material.dart';


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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      title: 'Gradient Container',
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Center(child: Text("Gradient Container"))),
      body: Column(
        children: [
          Container(
            height: 100.0,
            margin: const EdgeInsets.all(10.0),
            decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10.0)),
                gradient: LinearGradient(colors: [Colors.lightGreen, Colors.blueGrey],
                    begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Icon(Icons.add_business, color: Colors.white70,),
                ),
                Expanded(child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const<Widget>[
                    Text('New York', style: TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
                    SizedBox(height: 8.0,),
                    Text('Sunny', style: TextStyle(fontSize: 12.0, color: Colors.white70),),
                  ],)),
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text('12°', style: TextStyle(fontSize: 30.0, color: Colors.white70),),)
              ],),
          ),
          Container(
            height: 100.0,
            margin: const EdgeInsets.all(10.0),
            decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10.0)),
                gradient: LinearGradient(colors: [Colors.deepPurple, Colors.redAccent],
                    begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Icon(Icons.account_balance_sharp, color: Colors.white70,),
                ),
                Expanded(child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const<Widget>[
                    Text('New York', style: TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
                    SizedBox(height: 8.0,),
                    Text('Sunny', style: TextStyle(fontSize: 12.0, color: Colors.white70),),
                  ],)),
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text('12°', style: TextStyle(fontSize: 30.0, color: Colors.white70),),)
              ],),
          ),
          Container(
            height: 100.0,
            margin: const EdgeInsets.all(10.0),
            decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10.0)),
                gradient: LinearGradient(colors: [Colors.teal, Colors.lime],
                    begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Icon(Icons.cloud, color: Colors.white70,),
                ),
                Expanded(child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const<Widget>[
                    Text('New York', style: TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
                    SizedBox(height: 8.0,),
                    Text('Sunny', style: TextStyle(fontSize: 12.0, color: Colors.white70),),
                  ],)),
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text('12°', style: TextStyle(fontSize: 30.0, color: Colors.white70),),)
              ],),
          ),
          Container(
            height: 100.0,
            margin: const EdgeInsets.all(10.0),
            decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10.0)),
                gradient: LinearGradient(colors: [Colors.cyan, Colors.blueGrey],
                    begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Icon(Icons.add_location, color: Colors.white70,),
                ),
                Expanded(child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const<Widget>[
                    Text('New York', style: TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
                    SizedBox(height: 8.0,),
                    Text('Sunny', style: TextStyle(fontSize: 12.0, color: Colors.white70),),
                  ],)),
                const Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text('12°', style: TextStyle(fontSize: 30.0, color: Colors.white70),),)
              ],),
          ),
        ],
      )
    );
  }
}