Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    Flutter Interview Questions for freshers

    June 25, 2023

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023
    Facebook Twitter Instagram
    Facebook Twitter Instagram Pinterest YouTube
    DeepCrazyWorld
    Subscribe
    • Home
    • FLUTTER
      • UI
        • Splash Screen
        • Card Design
        • Login Screen
      • APPS
    • ANDROID
      • ANDROID APP
      • GAME APP
    • SOURCE CODE
    • ANDROID STUDIO
    • PROJECT
      • Android Projects
      • College Projects
      • Project Ideas
      • PHP Projects
      • Python Projects
    • MCQ
      • AKTU MCQ
        • RPA MCQ
        • COA MCQ
        • HPC MCQ
        • SPM MCQ
        • Renewable Energy All MCQ
        • Data Compression MCQ
        • Data Structure MCQ
        • Digital Image Processing MCQ
        • Software Engineering MCQ
        • Machine Learning MCQ
        • Artificial Intelligence MCQ
      • D PHARMA MCQ
        • Pharmaceutics – I MCQ
        • Pharmacognosy MCQ
        • Pharmaceutical Chemistry MCQ
        • Biochemistry and Clinical Pathology MCQ
        • Human Anatomy and Physiology MCQ
        • Heath Education and Community Pharmacy MCQ
      • COLLECTION
        • WORDPRESS
          • SEO
          • TOP 10 WORDPRESS THEME
        • PRODUCTIVITY
        • Networking
        • Program
        • YOUTUBE
        • QUOTES
    • INTERVIEW QUESTIONS
    DeepCrazyWorld
    Home»FLUTTER»How to Create A Simple Splash Screen UI design in flutter
    FLUTTER

    How to Create A Simple Splash Screen UI design in flutter

    DeepikaBy DeepikaOctober 5, 2022Updated:October 15, 2022No Comments5 Mins Read
    Facebook Twitter LinkedIn WhatsApp Telegram
    Share
    Facebook Twitter LinkedIn Pinterest Telegram WhatsApp

    Table of Contents

    • Intro screen
    • IntroDurations.dart
    • Get Full Source Code
    • Related Articles:
    • READ MORE

    Intro screen

    simple UI screen with minimum configurations – How to Create A Simple Splash Screen UI design in flutter

    • dynamic pages length
    • configurable

    Get Full Example:  here

    <img decoding=
    flutter splash screen

    IntroDurations.dart

    import 'package:extra_alignments/extra_alignments.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_animate/animate.dart';
    import 'package:flutter_animate/effects/effects.dart';
    import 'package:flutter_animate/num_duration_extensions.dart';
    import 'package:gap/gap.dart';
    import 'package:flutter_intro_screen/default_text_color.dart';
    import 'package:flutter_intro_screen/indicator.dart';
    
    class IntroDurations {
      final Duration fast;
      final Duration med;
      final Duration slow;
      final Duration pageTransition;
    
      const IntroDurations({
        this.fast = const Duration(milliseconds: 300),
        this.med = const Duration(milliseconds: 600),
        this.slow = const Duration(milliseconds: 900),
        this.pageTransition = const Duration(milliseconds: 200),
      });
    }
    
    class IntroMessages {
      final String swap;
      final String navigate;
    
      const IntroMessages({
        this.swap = "Swap left to continue",
        this.navigate = "Navigate",
      });
    }
    
    class IntroText {
      final TextStyle body;
      final TextStyle bodySmall;
    
      const IntroText({
        this.body = const TextStyle(),
        this.bodySmall = const TextStyle(),
      });
    }
    
    class IntroColors {
      final Color text;
      final Color button;
      final Color background;
    
      const IntroColors({
        this.background = Colors.black,
        this.text = Colors.white,
        this.button = Colors.white,
      });
    }
    
    class IntroInsets {
      final double xxs;
      final double xs;
      final double sm;
      final double md;
      final double lg;
      final double xl;
      final double xxl;
    
      const IntroInsets({
        this.xxs = 4,
        this.xs = 8,
        this.sm = 16,
        this.md = 24,
        this.lg = 32,
        this.xl = 48,
        this.xxl = 56,
      });
    }
    
    class FlutterIntroScreen extends StatefulWidget {
      final List<IntroPageData> pageData;
      final IntroMessages messages;
      final IntroText texts;
      final IntroInsets insets;
      final IntroDurations durations;
      final IntroColors colors;
      final VoidCallback onCompletePressed;
    
      final Widget appLogo;
      final Widget centerWidget;
    
      const FlutterIntroScreen({
        Key? key,
        required this.appLogo,
        required this.centerWidget,
        required this.pageData,
        required this.onCompletePressed,
        this.messages = const IntroMessages(),
        this.insets = const IntroInsets(),
        this.durations = const IntroDurations(),
        this.colors = const IntroColors(),
        this.texts = const IntroText(),
      }) : super(key: key);
    
      @override
      State<FlutterIntroScreen> createState() => _FlutterIntroScreenState();
    }
    
    class _FlutterIntroScreenState extends State<FlutterIntroScreen> {
      static const double _imageSize = 264;
      static const double _logoHeight = 126;
      static const double _textHeight = 155;
      static const double _pageIndicatorHeight = 55;
    
      late final PageController _pageController = PageController()
        ..addListener(_handlePageChanged);
      final ValueNotifier<int> _currentPage = ValueNotifier(0);
    
      @override
      void dispose() {
        _pageController.dispose();
        super.dispose();
      }
    
      void _handlePageChanged() {
        int newPage = _pageController.page?.round() ?? 0;
        _currentPage.value = newPage;
      }
    
      void _handleSemanticSwipe(int dir) {
        _pageController.animateToPage((_pageController.page ?? 0).round() + dir,
            duration: widget.durations.fast, curve: Curves.easeOut);
      }
    
      @override
      Widget build(BuildContext context) {
        // This view uses a full screen PageView to enable swipe navigation.
        // However, we only want the title / description to actually swipe,
        // so we stack a PageView with that content over top of all the other
        // content, and line up their layouts.
    
        final List<Widget> pages =
            widget.pageData.map((e) => _Page(data: e)).toList();
    
        final Widget content = Stack(children: [
          // page view with title & description:
          MergeSemantics(
            child: Semantics(
              onIncrease: () => _handleSemanticSwipe(1),
              onDecrease: () => _handleSemanticSwipe(-1),
              child: PageView(
                physics: const BouncingScrollPhysics(),
                controller: _pageController,
                children: pages,
                onPageChanged: (_) {},
              ),
            ),
          ),
    
          IgnorePointer(
            ignoringSemantics: false,
            child: Column(children: [
              const Spacer(),
    
              // logo:
              Semantics(
                header: true,
                child: Container(
                  height: _logoHeight,
                  alignment: Alignment.center,
                  child: widget.appLogo,
                ),
              ),
    
              // masked image:
              SizedBox(
                height: _imageSize,
                width: _imageSize,
                child: ValueListenableBuilder<int>(
                  valueListenable: _currentPage,
                  builder: (_, value, __) {
                    return AnimatedSwitcher(
                      duration: widget.durations.slow,
                      child: KeyedSubtree(
                        key: ValueKey(
                            value), // so AnimatedSwitcher sees it as a different child.
                        child: IntroPageImage(data: widget.pageData[value]),
                      ),
                    );
                  },
                ),
              ),
    
              // placeholder gap for text:
              const Gap(_FlutterIntroScreenState._textHeight),
    
              // page indicator:
              Container(
                height: _pageIndicatorHeight,
                alignment: const Alignment(0.0, -0.75),
                child: AppPageIndicator(
                  count: widget.pageData.length,
                  controller: _pageController,
                  color: widget.colors.background,
                ),
              ),
    
              const Spacer(flex: 2),
            ]),
          ),
    
          // finish button:
          Positioned(
            right: widget.insets.lg,
            bottom: widget.insets.lg,
            child: _buildFinishBtn(context),
          ),
    
          // nav help text:
          BottomCenter(
            child: Padding(
              padding: EdgeInsets.only(bottom: widget.insets.lg),
              child: _buildNavText(context),
            ),
          ),
        ]);
    
        return DefaultTextColor(
          color: widget.colors.text,
          child: Container(
            color: widget.colors.background,
            child: SafeArea(child: content.animate().fadeIn(delay: 500.ms)),
          ),
        );
      }
    
      Widget _buildFinishBtn(BuildContext context) {
        return ValueListenableBuilder<int>(
          valueListenable: _currentPage,
          builder: (_, pageIndex, __) {
            return AnimatedOpacity(
              opacity: pageIndex == widget.pageData.length - 1 ? 1 : 0,
              duration: widget.durations.fast,
              child: FloatingActionButton.small(
                elevation: 0,
                onPressed: widget.onCompletePressed,
                tooltip: widget.messages.swap,
                backgroundColor: widget.colors.button,
                child: const Icon(Icons.arrow_forward_ios_rounded),
              ),
            );
          },
        );
      }
    
      Widget _buildNavText(BuildContext context) {
        return ValueListenableBuilder(
          valueListenable: _currentPage,
          builder: (_, pageIndex, __) {
            return AnimatedOpacity(
              opacity: pageIndex == widget.pageData.length - 1 ? 0 : 1,
              duration: widget.durations.fast,
              child: Semantics(
                onTapHint: widget.messages.swap,
                onTap: () {
                  final int current = _pageController.page!.round();
                  _pageController.animateToPage(
                    current + 1,
                    duration: 250.ms,
                    curve: Curves.easeIn,
                  );
                },
                child: widget.centerWidget,
              ),
            );
          },
        );
      }
    }
    
    @immutable
    class IntroPageData {
      const IntroPageData({
        required this.title,
        required this.description,
        required this.image,
        this.mask,
      });
    
      final Widget title;
      final Widget description;
      final Widget image;
      final Widget? mask;
    }
    
    class _Page extends StatelessWidget {
      const _Page({Key? key, required this.data}) : super(key: key);
    
      final IntroPageData data;
    
      @override
      Widget build(BuildContext context) {
        return Semantics(
          liveRegion: true,
          child: Column(
            children: [
              const Spacer(),
              const Gap(_FlutterIntroScreenState._imageSize +
                  _FlutterIntroScreenState._logoHeight),
              SizedBox(
                height: _FlutterIntroScreenState._textHeight,
                width: _FlutterIntroScreenState._imageSize,
                child: IntroStaticTextScale(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      data.title,
                      const Gap(12),
                      data.description,
                    ],
                  ),
                ),
              ),
              const Gap(_FlutterIntroScreenState._pageIndicatorHeight),
              const Spacer(flex: 2),
            ],
          ),
        );
      }
    }
    
    class IntroPageImage extends StatelessWidget {
      const IntroPageImage({
        Key? key,
        required this.data,
      }) : super(key: key);
    
      final IntroPageData data;
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: [
            SizedBox.expand(
              child: data.image,
            ),
            if (data.mask != null)
              Positioned.fill(
                child: data.mask!,
              ),
          ],
        );
      }
    }
    
    class IntroStaticTextScale extends StatelessWidget {
      const IntroStaticTextScale({
        Key? key,
        required this.child,
        this.scale = 1,
      }) : super(key: key);
      final Widget child;
      final double scale;
    
      @override
      Widget build(BuildContext context) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: scale),
          child: child,
        );
      }
    }

    Get Full Source Code

    Get Full Source Code


    Do like & share my Facebook page. if you find this post helpful. Thank you!!

    Related Articles:

    How to Install Flutter in windows 10

    How to Setup Space Between Elements In Flutter 

    Flutter Card Widget with Example

    Integrating an API into a Flutter – Working with REST APIs

    Create a simple splash screen in Flutter

    Android Projects with Source Code

    Flutter Interview Questions

    School Database Management System Project 

    Create Login Page UI Design in flutter

    Make Navigation Drawer in Flutter Source Code

    READ MORE

    Share this…
    • Facebook
    • Pinterest
    • Twitter
    • Linkedin
    • Whatsapp
    • Gmail
    Post Views: 416
    flutter flutter beautiful splash screen flutter launch screen flutter native splash screen example flutter real splash screen flutter splash flutter splash screen flutter splash screen animation flutter splash screen example flutter splash screen image flutter splash screen tutorial how to create a splash screen in flutter how to create splash screen in flutter splash screen splash screen flutter splash screen in flutter splash screen using flutter
    Share. Facebook Twitter LinkedIn WhatsApp Telegram
    Previous ArticleHow to Run first Flutter App on windows Step by step
    Next Article How to Create Login Page UI Design and Animation For Flutter
    Deepika
    • Website
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • LinkedIn

    Hey, I'm Deepika a professional blogger and Experienced in Android Developer,Flutter Developer, PHP Web Developer. Technically sound Post graduate pursuing M.Tech in Computer Science and Engineering. I Love to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. Skilled in Java, HTML, CSS,Bootstrap,j query PHP, Python, SQL, C, C++,Firebase,MySQL,SQLite,JavaScript. Also I have learned Networking.

    Related Posts

    Flutter Interview Questions for freshers

    June 25, 2023

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023

    Leave A Reply Cancel Reply

    Our Picks
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Don't Miss
    FLUTTER

    Flutter Interview Questions for freshers

    By DeepikaJune 25, 202303 Mins Read

    Certainly! Here’s a Flutter interview question along with its answer suitable for a fresher: Question:…

    Share this...
    • Facebook
    • Pinterest
    • Twitter
    • Linkedin
    • Whatsapp
    • Gmail

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023
    Archives

    Subscribe to Updates

    Get the latest creative news from SmartMag about art & design.

    About Us
    About Us

    Hey, I'm Deepika a professional blogger and Experienced in Mobile App Developer ( Android and Flutter ) Technically sound Post graduated M.Tech in Computer Science and Engineering.
    I Love to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology.

    Recent Posts
    • Flutter Interview Questions for freshers
    • Flutter Interview Questions for Experienced
    • Top 15 Flutter Interview Questions and Answers 2023
    • The Best Flutter Stepper Widget : Build Multi-Step Forms
    • Flutter ListView – A Guide to Creating Dynamic Lists with flutter
    • Top 10 Flutter Projects with source code For Startups
    • How to use chatGPT for UI/UX design with examples in 2023
    • Top 30 Flutter Interview Questions in 2023

    Flutter Interview Questions for freshers

    June 25, 2023

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023
    Facebook Twitter Instagram Pinterest
    • Home
    • Contact Us
    • Disclaimer
    • Privacy Policy
    © 2023 DeepCrazyWorld. Designed by DeepCrazyWorld.

    Type above and press Enter to search. Press Esc to cancel.