How To Create Circle Avatar With Gradient background In Flutter

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

Background With circleavatar image, TItle And Description In flutter

How To Create Gradient background And CircleAvatar In Flutter

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

Step 1
 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown      in the image. Now add the image inside the newly created assets directory.

 Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
flutter: 
  assets: 
   - assets/images/

YOu Can Add Gradiant Background With Image, Description Code:
Center(
    child: Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.blue[500], Colors.blue[300]])),
      child:  Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 80,),
          Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: AssetImage("assets/images/logo.jpg"),
                  radius: 80.0,
                ),
                SizedBox(height: 20,),
                Text("Welcome Bajarangisoft", style: TextStyle(color: Colors.white, fontSize: 22),),
              ],
            ),
          ),
          SizedBox(height: 5),
          Expanded(
            child: Container(
              child: SingleChildScrollView(
                child: Padding(
                  padding: EdgeInsets.all(20),
                  child: Column(
                    children: <Widget>[
                      Container(
                        child: Column(
                          children: <Widget>[
                            Container(
                              child: Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                                  " Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, "
                                  "when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                  "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.",
                              style: TextStyle(color: Colors.white),
                              )
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    ))

Complete Code FOr Gradiant Background With Image, Description  In Flutter
main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [Colors.blue[500], Colors.blue[300]])),
              child:  Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 80,),
                  Padding(
                    padding: EdgeInsets.all(20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        CircleAvatar(
                          backgroundImage: AssetImage("assets/images/logo.jpg"),
                          radius: 80.0,
                        ),
                        SizedBox(height: 20,),
                        Text("Welcome Bajarangisoft", style: TextStyle(color: Colors.white, fontSize: 22),),
                      ],
                    ),
                  ),
                  SizedBox(height: 5),
                  Expanded(
                    child: Container(
                      child: SingleChildScrollView(
                        child: Padding(
                          padding: EdgeInsets.all(20),
                          child: Column(
                            children: <Widget>[
                              Container(
                                child: Column(
                                  children: <Widget>[
                                    Container(
                                      child: Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                                          " Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, "
                                          "when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                          "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.",
                                      style: TextStyle(color: Colors.white),
                                      )
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )));
  }
}

Related Post