LinearGradient in flutter

Akshay Kumar

5 June 2023

In this blog we are going to discuss the Implementation of LinearGradient in flutter.

LinearGradient class is used for presenting the linear gradient. We add the list of colours inside the LinearGradient class inside the colors attribute.

In linear gradient we define two anchor points begin and end. Begin point to the starting point of the gradient and end refers to the point where our gradient will be finished.

You may also check our flutter app development services page to read more about Flutter app development from mobikul.

Implementation:

Create the gradient by using the LinearGradient class inside the box decoration.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../../mobikul/app_widgets/app_bar.dart';

class LinearGradientScreen extends StatefulWidget {
  LinearGradientScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<LinearGradientScreen> createState() => _LinearGradientScreenState();
}

class _LinearGradientScreenState extends State<LinearGradientScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  @override
  void initState() {
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).cardColor,
      appBar: commonAppBar(
        "Linear Gradient",
        context,
      ),
      body: buildUi(),
    );
  }

  Widget buildUi() {
    return Column(
      children: [
        Expanded(child: buildChatUi()),
      ],
    );
  }

  Widget buildChatUi() {
    return Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(colors: [
            Colors.amber,
            Colors.cyan,
            Colors.indigo,
            Colors.redAccent
          ], begin: Alignment.topRight, end: Alignment.bottomLeft)),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import '../../../../mobikul/app_widgets/app_bar.dart';

class LinearGradientScreen extends StatefulWidget {

LinearGradientScreen({

Key? key,

}) : super(key: key);

@override

State<LinearGradientScreen> createState() => _LinearGradientScreenState();

}

class _LinearGradientScreenState extends State<LinearGradientScreen>

with SingleTickerProviderStateMixin {

late AnimationController _controller;

late Animation _animation;

@override

void didChangeDependencies() {

super.didChangeDependencies();

}

@override

void initState() {

_controller = AnimationController(

duration: Duration(seconds: 2),

vsync: this,

);

_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);

_controller.forward();

super.initState();

}

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Theme.of(context).cardColor,

appBar: commonAppBar(

"Linear Gradient",

context,

body: buildUi(),

);

}

Widget buildUi() {

return Column(

children: [

Expanded(child: buildChatUi()),

);

}

Widget buildChatUi() {

return Container(

decoration: const BoxDecoration(

gradient: LinearGradient(colors: [

Colors.amber,

Colors.cyan,

Colors.indigo,

Colors.redAccent

], begin: Alignment.topRight, end: Alignment.bottomLeft)),

);

}

We have added the list of colors which will draw the linear gradient with respect to our start and end point.

For begin we are using Alignment.topRight which will start drawing gradient from the right side and top of the screen.

For end we are using Alignment.bottomLeft to end our gradient at left bottom of the screen.

We have used stateful widget for crating the container with linear gradient for our app.

Result

The above linear gradient will looks like:

Conclusion:

For more information regarding the Implementation of LinearGradient in flutter follow link.

In this blog, we have learned Implementation of LinearGradient on flutter to make the interactive UI experience in your app.

Thanks for reading this blog. You can also check other blogs from here.