Nilen Patel Inc.

Tutorial and code of Circles Background in Flutter. Copy and paste the below code as per your requirements.

circles_background: ^0.0.2

import 'package:flutter/material.dart';
import 'package:circles_background/circles_background.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowMaterialGrid: false,
      title: 'Circles Background',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: CirclesBackgroundPage(),
    );
  }
}

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

  final List<CircleInfo> circles = [
    CircleInfo(
        size: const Size(300, 500),
        color: Colors.lime,
        borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(200)),
        alignment: Alignment.topRight
    ),
    CircleInfo(
        size: const Size(300, 900),
        gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.teal[800]!, Colors.cyan]
        ),
        borderRadius: const BorderRadius.only(),
        alignment: Alignment.topLeft
    ),
    CircleInfo(
        size: const Size(200, 500),
        gradient: const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.red, Colors.blue]
        ),
        borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(50), topLeft: Radius.circular(150)),
        alignment: Alignment.bottomRight
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CirclesBackground(
        circles: circles,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 70, horizontal: 25),
          child: Text('Circles Background', style: TextStyle(
              color: Colors.white,
              fontSize: 40
          ),),
        ),
      ),

    );
  }
}

class ThreeCirclesBackgroundPage extends StatelessWidget {
  final GradientColor gradientColor;
  const ThreeCirclesBackgroundPage(this.gradientColor, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ThreeCirclesBackground(
        gradientColor: gradientColor,
        customColors: getCustomColors(),
        sizeOfScreen: MediaQuery.of(context).size,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 70, horizontal: 25),
          child: Text('Hello word!', style: TextStyle(
              color: Colors.white,
              fontSize: 40
          ),),
        ),
      ),

    );
  }

  List<List<Color>>? getCustomColors() {
    if (gradientColor == GradientColor.custom) {
      return [
        [Colors.pink[700]!, Colors.pink[900]!],
        [Colors.pink[700]!, Colors.pink[900]!],
        [Colors.pink[700]!, Colors.pink[900]!],
      ];
    }
  }
}