Performance and animation problem

[Abdulazeez-Raja]

Hello, I encountered a problem. First, as shown in the video, the appearance is not the same as on the website. Secondly, there is a performance issue with navigating in the PageView.

my code:

class OnBoardingWidget extends StatelessWidget {
  final String label;
  final String body;
  final String lottiePath;

  const OnBoardingWidget({
    super.key,
    required this.label,
    required this.body,
    required this.lottiePath,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Lottie.asset(
          lottiePath,
          height: 250,
          width: 250,
        ),
        Text(
          label,
          style: Theme.of(context).textTheme.labelLarge!.copyWith(
              color: Theme.of(context).colorScheme.secondaryContainer),
        ),
        const Gap(10),
        Text(
          body,
          style: Theme.of(context).textTheme.bodySmall!.copyWith(
              color: Theme.of(context).colorScheme.secondaryContainer),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

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

  @override
  State<WelcomeScreen> createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color(0xFF454756),
              Color(0xFF1E1E1E),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: PageView(
                onPageChanged: (int page) {
                  setState(() {
                    _currentPage = page;
                  });
                },
                children: const [
                  OnBoardingWidget(
                    label: 'Welcome to My Pass',
                    body: 'Secure. Simple. Smart.',
                    lottiePath: 'assets/animations/on_boarding1.json',
                  ),
                  OnBoardingWidget(
                    label: 'Save All Your Passwords',
                    body: 'One App, All Your Passwords, Fully Encrypted',
                    lottiePath: 'assets/animations/on_boarding2.json',
                  ),
                  OnBoardingWidget(
                    label: 'Advanced Encryption',
                    body: 'Your Data, Protected by Advanced Encryption',
                    lottiePath: 'assets/animations/on_boarding3.json',
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

flutter doctor:

[√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3880], locale en-US)
    • Flutter version 3.22.2 on channel stable at D:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (5 weeks ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at C:\Users\azoz1\AppData\Local\Android\sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11609105)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.37)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.34931.43
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2024.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11609105)

[√] VS Code (version 1.91.1)
    • VS Code at C:\Users\azoz1\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.92.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 15 (API 35) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22631.3880]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 126.0.6478.127
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 126.0.2592.87

[√] Network resources
    • All expected network resources are available.

• No issues found!

lottie version: ^3.1.2

video: Screen_recording_20240713_132249.webm