Is there any way to implement swipe onboarding screen in flutter with indicators?

You can rely on a 3rd party package such as smooth_page_indicator which was mentionned.

Based on the screenshot you’ve provided I’d say that the ExpandingDotsEffect is what you’re looking for.

Sample

class PageIndicator extends StatelessWidget {
  const PageIndicator({
    super.key,
    required this.length,
    required this.controller,
  });

  final int length;
  final PageController controller;

  @override
  Widget build(BuildContext context) {
    return SmoothPageIndicator(
      controller: controller,
      count: length,
      effect: const ExpandingDotsEffect(
        // Note that you'll have to change the following properties to match
        // your design.
        activeDotColor: Colors.orange,
        dotColor: Colors.blue,
        dotHeight: 8,
        dotWidth: 10,
        expansionFactor: 3,
      ),
    );
  }
}

Screenshot

Full Code

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

class OnboardingPage extends StatefulWidget {
  const OnboardingPage({super.key});

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  final pageController = PageController();

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final pages = List<Widget>.generate(
      3,
      (index) {
        return CarouselTile(
          title: 'Title $index',
          subtitle: 'Subtitle $index',
        );
      },
    );

    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Carousel(
              controller: pageController,
              pages: pages,
            ),
            PageIndicator(
              length: pages.length,
              controller: pageController,
            ),
          ],
        ),
      ),
    );
  }
}

class Carousel extends StatelessWidget {
  const Carousel({
    super.key,
    required this.controller,
    required this.pages,
  });

  final PageController controller;
  final List<Widget> pages;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: PageView(
        controller: controller,
        children: pages,
      ),
    );
  }
}

class CarouselTile extends StatelessWidget {
  const CarouselTile({
    super.key,
    required this.title,
    required this.subtitle,
  });

  final String title;
  final String subtitle;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          title,
          style: Theme.of(context).textTheme.headline5,
        ),
        const SizedBox(height: 16),
        Text(
          subtitle,
          style: Theme.of(context).textTheme.subtitle1,
        ),
      ],
    );
  }
}

class PageIndicator extends StatelessWidget {
  const PageIndicator({
    super.key,
    required this.length,
    required this.controller,
  });

  final int length;
  final PageController controller;

  @override
  Widget build(BuildContext context) {
    return SmoothPageIndicator(
      controller: controller,
      count: length,
      effect: const ExpandingDotsEffect(
        // Note that you'll have to change the following properties to match
        // your design.
        activeDotColor: Colors.orange,
        dotColor: Colors.blue,
        dotHeight: 8,
        dotWidth: 10,
        expansionFactor: 3,
      ),
    );
  }
}