In Flutter, there are three types of gradients
- Linear Gradient
- Radial Gradient
- Sweep Gradient
Linear Gradient
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Sample App',
),
),
body: Center(
child: Container(
child: const Text('Hello'),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
),
),
),
),
),
),
);
}
Constraints
Container(
child: const Text('Hello'),
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
),
),
),
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
),
),
),
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
begin: Alignment.topCenter,
end: Alignment.bottomLeft,
),
),
),
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
begin: Alignment.topCenter,
end: Alignment.bottomLeft,
stops: [0.2, 0.91],
),
),
),
RadialGradient
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: RadialGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
stops: [0.2, 1.0],
center: Alignment(0.1, 0.2),
),
),
),
Focal
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: RadialGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
focal: Alignment(0.2, 0.5),
),
),
),
Sweep Gradient
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: SweepGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
stops: [9.2, 1.01],
),
),
),
Container(
child: const Text('Hello'),
alignment: Alignment.center,
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: SweepGradient(
colors: [
Color(0xffFF4500),
Color(0xffB7AC44),
],
stops: [0.2, 1.01],
startAngle: 0.5,
endAngle: 1.0,
),
),
),
Video Link: