Flutter में अगली-पीढ़ी की टेक्नोलॉजी के यूआई बनाना

1. शुरू करने से पहले

Flutter की मदद से डेवलपर, हॉट रीलोड और डिक्लेरेटिव यूआई के कॉम्बिनेशन का इस्तेमाल करके तेज़ी से नए यूज़र इंटरफ़ेस बना सकते हैं. हालांकि, कभी-कभी आपको किसी इंटरफ़ेस में अतिरिक्त इंटरैक्टिविटी जोड़ने की ज़रूरत पड़ती है. ये टच, कर्सर घुमाने पर एक बटन को ऐनिमेट करने जितना आसान हो सकते हैं. इसके अलावा, जीपीयू की पावर का इस्तेमाल करके, यूज़र इंटरफ़ेस को बेहतर बनाने के लिए किसी शेडर का इस्तेमाल किया जा सकता है.

इस कोडलैब में, Flutter ऐप्लिकेशन बनाकर ऐनिमेशन, शेडर, और पार्टिकल फ़ील्ड का इस्तेमाल करके यूज़र इंटरफ़ेस तैयार किया जा सकता है. इससे साइंस फ़िक्शन वाली ऐसी फ़िल्मों और टीवी शो की जानकारी मिलती है जिन्हें हम तब भी देखना पसंद करते हैं, जब हम कोडिंग नहीं कर रहे होते हैं.

आपको क्या बनाना होगा

तबाही के बाद की दुनिया में चलने वाले साइंस-फ़िक्शन की थीम वाले गेम के लिए, आपको शुरुआती मेन्यू पेज बनाना होगा. इसमें एक फ़्रैगमेंट शेडर वाला टाइटल है, जो टेक्स्ट को विज़ुअल तौर पर ऐनिमेट करने के लिए उसका सैंपल देता है. मुश्किल मेन्यू वाला एक ऐसा मेन्यू जो पेज की कलर थीम को कई ऐनिमेशन के साथ बदलता है और दूसरे फ़्रैगमेंट शेडर से पेंट किया गया ऐनिमेटेड ऑर्ब होता है. अगर यह काफ़ी नहीं है, तो कोडलैब के आखिर में आपको एक सूक्ष्म कण इफ़ेक्ट जोड़ना होगा, जिससे पेज पर हलचल और रुचि आए.

इन स्क्रीनशॉट में वह ऐप्लिकेशन दिखाया गया है जिसे इन तीन डेस्कटॉप ऑपरेटिंग सिस्टम पर बनाया जाएगा: Windows, Linux, और macOS. पूरी जानकारी के लिए, वेब ब्राउज़र का एक वर्शन (यह भी काम करता है) दिया गया है. हर जगह ऐनिमेशन और फ़्रैगमेंट शेडर!

Windows पर काम करने वाला ऐप्लिकेशन

Chrome ब्राउज़र में चल रहा ऐसा ऐप्लिकेशन जिस पर काम पूरा हो चुका है

Linux पर चल रहा, खत्म हो चुका ऐप्लिकेशन

macOS पर इस्तेमाल किया जा रहा ऐप्लिकेशन

ज़रूरी शर्तें

आप इन चीज़ों के बारे में जानेंगे

आपको इनकी ज़रूरत होगी

2. अपनी प्रोफ़ाइल बनाना शुरू करें

स्टार्टर कोड डाउनलोड करें

  1. GitHub डेटा स्टोर करने की इस जगह पर जाएं.
  2. कोड > पर क्लिक करें इस कोडलैब के लिए सभी कोड डाउनलोड करने के लिए, पिन कोड डाउनलोड करें.
  3. codelabs-main रूट फ़ोल्डर को अनपैक करने के लिए, डाउनलोड की गई ZIP फ़ाइल को अनज़िप करें. आपको सिर्फ़ next-gen-ui/ सबडायरेक्ट्री की ज़रूरत होगी, जिसमें step_01 से step_06 फ़ोल्डर तक के फ़ोल्डर शामिल हैं. इन फ़ोल्डर में वह सोर्स कोड होता है जिसे आपने इस कोडलैब के हर चरण के लिए बनाया है.

प्रोजेक्ट डिपेंडेंसी डाउनलोड करें

  1. बनाम कोड में, फ़ाइल > फ़ोल्डर खोलें > कोडलैब-मुख्य > अगली पीढ़ी का यूज़र इंटरफ़ेस (यूआई) > शुरुआती प्रोजेक्ट खोलने के लिए चरण_01.
  2. अगर आपको 'VS कोड' डायलॉग दिखता है, जिसमें आपसे स्टार्टर ऐप्लिकेशन के लिए ज़रूरी पैकेज डाउनलोड करने के लिए कहा जाता है, तो पैकेज पाएं पर क्लिक करें.

बनाम कोड का डायलॉग बॉक्स, जो आपको स्टार्टर ऐप्लिकेशन के लिए ज़रूरी पैकेज डाउनलोड करने के लिए कहता है.

  1. अगर आपको 'VS कोड' डायलॉग नहीं दिखता है, जो आपको स्टार्टर ऐप्लिकेशन के लिए ज़रूरी पैकेज डाउनलोड करने के लिए कहता है, तो टर्मिनल खोलें. इसके बाद, step_01 फ़ोल्डर पर जाएं और flutter pub get कमांड चलाएं.

स्टार्टर ऐप्लिकेशन चलाएं

  1. बनाम कोड में, या तो वह डेस्कटॉप ऑपरेटिंग सिस्टम चुनें जिसे आप चला रहे हैं या अगर आप किसी वेब ब्राउज़र में अपने ऐप्लिकेशन की जांच करना चाहते हैं, तो Chrome चुनें.

उदाहरण के लिए, डिप्लॉयमेंट टारगेट के तौर पर macOS का इस्तेमाल करने पर, आपको यह जानकारी दिखती है:

VSCode के स्टेटस बार की सजावट में, Flutter टारगेट को macOS (डारविन) में दिखाया गया है

Chrome को डिप्लॉयमेंट टारगेट के तौर पर इस्तेमाल करने पर, आपको ये चीज़ें दिखती हैं:

VSCode स्टेटस बार की सजावट, जो Flutter टारगेट दिखाती है वह Chrome (वेब-JavaScript) है

  1. lib/main.dart फ़ाइल खोलें और VSCode का 'चलाएं' बटन डीबग करना शुरू करें पर क्लिक करें. ऐप्लिकेशन आपके डेस्कटॉप ऑपरेटिंग सिस्टम या Chrome ब्राउज़र पर लॉन्च होता है.

स्टार्टर ऐप्लिकेशन के बारे में जानें

स्टार्टर ऐप्लिकेशन में, इन बातों पर ध्यान दें:

  • यूज़र इंटरफ़ेस (यूआई) तैयार है और इसे बनाया जा सकता है.
  • assets डायरेक्ट्री में आर्ट ऐसेट और दो फ़्रैगमेंट शेडर होते हैं, जिनका इस्तेमाल आपको करना है.
  • pubspec.yaml फ़ाइल में पहले से ही वे ऐसेट और पब पैकेज के कलेक्शन की सूची है जिनका आपको इस्तेमाल करना है.
  • lib डायरेक्ट्री में ज़रूरी main.dart फ़ाइल, आर्ट ऐसेट और फ़्रैगमेंट शेडर के पाथ की सूची बनाने वाली assets.dart फ़ाइल, और styles.dart फ़ाइल में वे TextStyles और कलर शामिल होते हैं जिनका इस्तेमाल किया जाएगा.
  • lib डायरेक्ट्री में एक common डायरेक्ट्री भी होती है, जिसमें कुछ ऐसी काम की सुविधाएं होती हैं जिनका इस्तेमाल इस कोडलैब में किया जाएगा. साथ ही, orb_shader डायरेक्ट्री में एक Widget होता है, जिसका इस्तेमाल वर्टेक्स शेडर के साथ ऑर्ब को दिखाने के लिए किया जाएगा.

यहां बताया गया है कि ऐप्लिकेशन चालू करने के बाद, आपको क्या दिखेगा.

इस कोडलैब ऐप्लिकेशन का टाइटल 'अगली-पीढ़ी की टेक्नोलॉजी यहां डालें...' है

3. सीन को पेंट करें

इस चरण में, स्क्रीन पर मौजूद सभी बैकग्राउंड आर्ट ऐसेट को लेयर में रखें. शुरुआत में आपको यह अजीब मोनोक्रोम दिखना चाहिए. हालांकि, इस चरण के आखिर में सीन में रंग जोड़ दिए जाते हैं.

सीन में ऐसेट जोड़ें

  1. अपनी lib डायरेक्ट्री में title_screen डायरेक्ट्री बनाएं. इसके बाद, कोई title_screen.dart फ़ाइल जोड़ें. फ़ाइल में यह कॉन्टेंट जोड़ें:

lib/title_screen/title_screen.dart

import 'package:flutter/material.dart';

import '../assets.dart';

class TitleScreen extends StatelessWidget {
  const TitleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          children: [
            /// Bg-Base
            Image.asset(AssetPaths.titleBgBase),

            /// Bg-Receive
            Image.asset(AssetPaths.titleBgReceive),

            /// Mg-Base
            Image.asset(AssetPaths.titleMgBase),

            /// Mg-Receive
            Image.asset(AssetPaths.titleMgReceive),

            /// Mg-Emit
            Image.asset(AssetPaths.titleMgEmit),

            /// Fg-Rocks
            Image.asset(AssetPaths.titleFgBase),

            /// Fg-Receive
            Image.asset(AssetPaths.titleFgReceive),

            /// Fg-Emit
            Image.asset(AssetPaths.titleFgEmit),
          ],
        ),
      ),
    );
  }
}

इस विजेट में लेयर में स्टैक की गई ऐसेट वाला सीन शामिल है. बैकग्राउंड, ग्राउंड, और फ़ोरग्राउंड लेयर, दोनों को दो या तीन इमेज के ग्रुप से दिखाया गया है. इन इमेज को अलग-अलग रंगों में चमका दिया जाएगा, ताकि यह कैप्चर किया जा सके कि सीन में किस तरह से रोशनी आती है.

  1. main.dart फ़ाइल में, यह कॉन्टेंट जोड़ें:

lib/main.dart

import 'dart:io' show Platform;

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'package:window_size/window_size.dart';
                                                          // Remove 'styles.dart' import
import 'title_screen/title_screen.dart';                  // Add this import


void main() {
  if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {
    WidgetsFlutterBinding.ensureInitialized();
    setWindowMinSize(const Size(800, 500));
  }
  runApp(const NextGenApp());
}

class NextGenApp extends StatelessWidget {
  const NextGenApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: const TitleScreen(),                          // Replace with this widget
    );
  }
}

इससे ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को आर्ट ऐसेट से बनाए जाने वाले मोनोक्रोम सीन से बदल दिया जाता है. इसके बाद, हर लेयर को कलर करना होता है.

कोडलैब ऐप्लिकेशन, जो बैकग्राउंड, मिडग्राउंड, और फ़ोरग्राउंड आर्ट ऐसेट के साथ चल रहा है. इसे मोनोक्रोम फ़ॉर्मैट में दिखाया गया है.

इमेज में रंग भरने का टूल जोड़ें

title_screen.dart फ़ाइल में यह कॉन्टेंट जोड़कर, इमेज में रंग भरने का टूल जोड़ें:

lib/title_screen/title_screen.dart

import 'package:flutter/material.dart';

import '../assets.dart';

class TitleScreen extends StatelessWidget {
  const TitleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          children: [
            /// Bg-Base
            Image.asset(AssetPaths.titleBgBase),

            /// Bg-Receive
            Image.asset(AssetPaths.titleBgReceive),

            /// Mg-Base
            Image.asset(AssetPaths.titleMgBase),

            /// Mg-Receive
            Image.asset(AssetPaths.titleMgReceive),

            /// Mg-Emit
            Image.asset(AssetPaths.titleMgEmit),

            /// Fg-Rocks
            Image.asset(AssetPaths.titleFgBase),

            /// Fg-Receive
            Image.asset(AssetPaths.titleFgReceive),

            /// Fg-Emit
            Image.asset(AssetPaths.titleFgEmit),
          ],
        ),
      ),
    );
  }
}

class _LitImage extends StatelessWidget {                 // Add from here...
  const _LitImage({
    required this.color,
    required this.imgSrc,
    required this.lightAmt,
  });
  final Color color;
  final String imgSrc;
  final double lightAmt;

  @override
  Widget build(BuildContext context) {
    final hsl = HSLColor.fromColor(color);
    return Image.asset(
      imgSrc,
      color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),
      colorBlendMode: BlendMode.modulate,
    );
  }
}                                                         // to here.

यह _LitImage यूटिलिटी विजेट, हर आर्ट ऐसेट के रंग में बदलाव करता है. यह इस बात पर निर्भर करता है कि वे रोशनी छोड़ रही हैं या नहीं. यह एक लिंटर चेतावनी ट्रिगर कर सकता है, क्योंकि आप अभी इस नए विजेट का उपयोग नहीं कर रहे हैं.

रंगों से पेंट करें

title_screen.dart फ़ाइल में बदलाव करके रंग में पेंट करने के लिए, यहां दिया गया तरीका अपनाएं:

lib/title_screen/title_screen.dart

import 'package:flutter/material.dart';

import '../assets.dart';
import '../styles.dart';                                  // Add this import

class TitleScreen extends StatelessWidget {
  const TitleScreen({super.key});

  final _finalReceiveLightAmt = 0.7;                      // Add this attribute
  final _finalEmitLightAmt = 0.5;                         // And this attribute

  @override
  Widget build(BuildContext context) {
    final orbColor = AppColors.orbColors[0];              // Add this final variable
    final emitColor = AppColors.emitColors[0];            // And this one

    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          children: [
            /// Bg-Base
            Image.asset(AssetPaths.titleBgBase),

            /// Bg-Receive
            _LitImage(                                    // Modify from here...
              color: orbColor,
              imgSrc: AssetPaths.titleBgReceive,
              lightAmt: _finalReceiveLightAmt,
            ),                                            // to here.

            /// Mg-Base
            _LitImage(                                    // Modify from here...
              imgSrc: AssetPaths.titleMgBase,
              color: orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),                                            // to here.

            /// Mg-Receive
            _LitImage(                                    // Modify from here...
              imgSrc: AssetPaths.titleMgReceive,
              color: orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),                                            // to here.

            /// Mg-Emit
            _LitImage(                                    // Modify from here...
              imgSrc: AssetPaths.titleMgEmit,
              color: emitColor,
              lightAmt: _finalEmitLightAmt,
            ),                                            // to here.

            /// Fg-Rocks
            Image.asset(AssetPaths.titleFgBase),

            /// Fg-Receive
            _LitImage(                                    // Modify from here...
              imgSrc: AssetPaths.titleFgReceive,
              color: orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),                                            // to here.

            /// Fg-Emit
            _LitImage(                                    // Modify from here...
              imgSrc: AssetPaths.titleFgEmit,
              color: emitColor,
              lightAmt: _finalEmitLightAmt,
            ),                                            // to here.
          ],
        ),
      ),
    );
  }
}

class _LitImage extends StatelessWidget {
  const _LitImage({
    required this.color,
    required this.imgSrc,
    required this.lightAmt,
  });
  final Color color;
  final String imgSrc;
  final double lightAmt;

  @override
  Widget build(BuildContext context) {
    final hsl = HSLColor.fromColor(color);
    return Image.asset(
      imgSrc,
      color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),
      colorBlendMode: BlendMode.modulate,
    );
  }
}

इस बार फिर से ऐप्लिकेशन इस्तेमाल किया गया. अब आर्ट ऐसेट हरे रंग में दिख रही हैं.

हरे रंग में दिख रही आर्ट ऐसेट के साथ चल रहा कोडलैब ऐप्लिकेशन.

4. यूज़र इंटरफ़ेस (यूआई) जोड़ें

इस चरण में, पिछले चरण में बनाए गए सीन पर यूज़र इंटरफ़ेस जोड़ा जाता है. इसमें टाइटल, कठिनाई का टारगेट चुनने वाले बटन, और सभी ज़रूरी शुरू करें बटन शामिल हैं.

शीर्षक जोड़ें

  1. lib/title_screen डायरेक्ट्री में title_screen_ui.dart फ़ाइल बनाएं और फ़ाइल में यह कॉन्टेंट जोड़ें:

lib/title_screen/title_screen_ui.dart

import 'package:extra_alignments/extra_alignments.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

import '../assets.dart';
import '../common/ui_scaler.dart';
import '../styles.dart';

class TitleScreenUi extends StatelessWidget {
  const TitleScreenUi({
    super.key,
  });
  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.symmetric(vertical: 40, horizontal: 50),
      child: Stack(
        children: [
          /// Title Text
          TopLeft(
            child: UiScaler(
              alignment: Alignment.topLeft,
              child: _TitleText(),
            ),
          ),
        ],
      ),
    );
  }
}

class _TitleText extends StatelessWidget {
  const _TitleText();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Gap(20),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Transform.translate(
              offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),
              child: Text('OUTPOST', style: TextStyles.h1),
            ),
            Image.asset(AssetPaths.titleSelectedLeft, height: 65),
            Text('57', style: TextStyles.h2),
            Image.asset(AssetPaths.titleSelectedRight, height: 65),
          ],
        ),
        Text('INTO THE UNKNOWN', style: TextStyles.h3),
      ],
    );
  }
}

इस विजेट में टाइटल और वे सभी बटन शामिल हैं जो इस ऐप्लिकेशन का यूज़र इंटरफ़ेस बनाते हैं.

  1. lib/title_screen/title_screen.dart फ़ाइल को अपडेट करने के लिए, यहां दिया गया तरीका अपनाएं:

lib/title_screen/title_screen.dart

import 'package:flutter/material.dart';

import '../assets.dart';
import '../styles.dart';
import 'title_screen_ui.dart';                            // Add this import

class TitleScreen extends StatelessWidget {
  const TitleScreen({super.key});

  final _finalReceiveLightAmt = 0.7;
  final _finalEmitLightAmt = 0.5;

  @override
  Widget build(BuildContext context) {
    final orbColor = AppColors.orbColors[0];
    final emitColor = AppColors.emitColors[0];

    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          children: [
            /// Bg-Base
            Image.asset(AssetPaths.titleBgBase),

            /// Bg-Receive
            _LitImage(
              color: orbColor,
              imgSrc: AssetPaths.titleBgReceive,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Mg-Base
            _LitImage(
              imgSrc: AssetPaths.titleMgBase,
              color: orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Mg-Receive
            _LitImage(
              imgSrc: AssetPaths.titleMgReceive,
              color: orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Mg-Emit
            _LitImage(
              imgSrc: AssetPaths.titleMgEmit,
              color: emitColor,
              lightAmt: _finalEmitLightAmt,
            ),

            /// Fg-Rocks
            Image.asset(AssetPaths.titleFgBase),

            /// Fg-Receive
            _LitImage(
              imgSrc: AssetPaths.titleFgReceive,
              color: orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Fg-Emit
            _LitImage(
              imgSrc: AssetPaths.titleFgEmit,
              color: emitColor,
              lightAmt: _finalEmitLightAmt,
            ),

            /// UI
            const Positioned.fill(                        // Add from here...
              child: TitleScreenUi(),
            ),                                            // to here.
          ],
        ),
      ),
    );
  }
}

class _LitImage extends StatelessWidget {
  const _LitImage({
    required this.color,
    required this.imgSrc,
    required this.lightAmt,
  });
  final Color color;
  final String imgSrc;
  final double lightAmt;

  @override
  Widget build(BuildContext context) {
    final hsl = HSLColor.fromColor(color);
    return Image.asset(
      imgSrc,
      color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),
      colorBlendMode: BlendMode.modulate,
    );
  }
}

इस कोड को चलाने से टाइटल दिखता है, जो यूज़र इंटरफ़ेस की शुरुआत में होता है.

कोडलैब ऐप्लिकेशन, जो 'आउटपोस्ट [57] के बारे में जानकारी नहीं देता' टाइटल के साथ चल रहा है

कठिनाई के लेवल वाले बटन जोड़ना

  1. focusable_control_builder पैकेज के लिए, नया इंपोर्ट जोड़कर title_screen_ui.dart को अपडेट करें:

lib/title_screen/title_screen_ui.dart

import 'package:extra_alignments/extra_alignments.dart';
import 'package:flutter/material.dart';
import 'package:focusable_control_builder/focusable_control_builder.dart'; // Add import
import 'package:gap/gap.dart';

import '../assets.dart';
import '../common/ui_scaler.dart';
import '../styles.dart';
  1. TitleScreenUi विजेट में, यह जोड़ें:

lib/title_screen/title_screen_ui.dart

class TitleScreenUi extends StatelessWidget {
  const TitleScreenUi({
    super.key,
    required this.difficulty,                            // Edit from here...
    required this.onDifficultyPressed,
    required this.onDifficultyFocused,
  });

  final int difficulty;
  final void Function(int difficulty) onDifficultyPressed;
  final void Function(int? difficulty) onDifficultyFocused; // to here.

  @override
  Widget build(BuildContext context) {
    return Padding(                                      // Move this const...
      padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50), // to here.
      child: Stack(
        children: [
          /// Title Text
          const TopLeft(                                 // Add a const here, as well
            child: UiScaler(
              alignment: Alignment.topLeft,
              child: _TitleText(),
            ),
          ),

          /// Difficulty Btns
          BottomLeft(                                    // Add from here...
            child: UiScaler(
              alignment: Alignment.bottomLeft,
              child: _DifficultyBtns(
                difficulty: difficulty,
                onDifficultyPressed: onDifficultyPressed,
                onDifficultyFocused: onDifficultyFocused,
              ),
            ),
          ),                                             // to here.
        ],
      ),
    );
  }
}
  1. कठिनाई वाले बटन लागू करने के लिए, नीचे दिए गए दो विजेट जोड़ें:

lib/title_screen/title_screen_ui.dart

class _DifficultyBtns extends StatelessWidget {
  const _DifficultyBtns({
    required this.difficulty,
    required this.onDifficultyPressed,
    required this.onDifficultyFocused,
  });

  final int difficulty;
  final void Function(int difficulty) onDifficultyPressed;
  final void Function(int? difficulty) onDifficultyFocused;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _DifficultyBtn(
          label: 'Casual',
          selected: difficulty == 0,
          onPressed: () => onDifficultyPressed(0),
          onHover: (over) => onDifficultyFocused(over ? 0 : null),
        ),
        _DifficultyBtn(
          label: 'Normal',
          selected: difficulty == 1,
          onPressed: () => onDifficultyPressed(1),
          onHover: (over) => onDifficultyFocused(over ? 1 : null),
        ),
        _DifficultyBtn(
          label: 'Hardcore',
          selected: difficulty == 2,
          onPressed: () => onDifficultyPressed(2),
          onHover: (over) => onDifficultyFocused(over ? 2 : null),
        ),
        const Gap(20),
      ],
    );
  }
}

class _DifficultyBtn extends StatelessWidget {
  const _DifficultyBtn({
    required this.selected,
    required this.onPressed,
    required this.onHover,
    required this.label,
  });
  final String label;
  final bool selected;
  final VoidCallback onPressed;
  final void Function(bool hasFocus) onHover;

  @override
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
      onPressed: onPressed,
      onHoverChanged: (_, state) => onHover.call(state.isHovered),
      builder: (_, state) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            width: 250,
            height: 60,
            child: Stack(
              children: [
                /// Bg with fill and outline
                Container(
                  decoration: BoxDecoration(
                    color: const Color(0xFF00D1FF).withOpacity(.1),
                    border: Border.all(color: Colors.white, width: 5),
                  ),
                ),

                if (state.isHovered || state.isFocused) ...[
                  Container(
                    decoration: BoxDecoration(
                      color: const Color(0xFF00D1FF).withOpacity(.1),
                    ),
                  ),
                ],

                /// cross-hairs (selected state)
                if (selected) ...[
                  CenterLeft(
                    child: Image.asset(AssetPaths.titleSelectedLeft),
                  ),
                  CenterRight(
                    child: Image.asset(AssetPaths.titleSelectedRight),
                  ),
                ],

                /// Label
                Center(
                  child: Text(label.toUpperCase(), style: TextStyles.btn),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
  1. TitleScreen विजेट को स्टेटलेस से स्टेटफ़ुल में बदलें. साथ ही, कठिनाई के हिसाब से कलर स्कीम को बदलने के लिए, राज्य जोड़ें:

lib/title_screen/title_screen.dart

import 'package:flutter/material.dart';

import '../assets.dart';
import '../styles.dart';
import 'title_screen_ui.dart';

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

  @override
  State<TitleScreen> createState() => _TitleScreenState();
}

class _TitleScreenState extends State<TitleScreen> {
  Color get _emitColor =>
      AppColors.emitColors[_difficultyOverride ?? _difficulty];
  Color get _orbColor =>
      AppColors.orbColors[_difficultyOverride ?? _difficulty];

  /// Currently selected difficulty
  int _difficulty = 0;

  /// Currently focused difficulty (if any)
  int? _difficultyOverride;

  void _handleDifficultyPressed(int value) {
    setState(() => _difficulty = value);
  }

  void _handleDifficultyFocused(int? value) {
    setState(() => _difficultyOverride = value);
  }

  final _finalReceiveLightAmt = 0.7;
  final _finalEmitLightAmt = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          children: [
            /// Bg-Base
            Image.asset(AssetPaths.titleBgBase),

            /// Bg-Receive
            _LitImage(
              color: _orbColor,
              imgSrc: AssetPaths.titleBgReceive,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Mg-Base
            _LitImage(
              imgSrc: AssetPaths.titleMgBase,
              color: _orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Mg-Receive
            _LitImage(
              imgSrc: AssetPaths.titleMgReceive,
              color: _orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Mg-Emit
            _LitImage(
              imgSrc: AssetPaths.titleMgEmit,
              color: _emitColor,
              lightAmt: _finalEmitLightAmt,
            ),

            /// Fg-Rocks
            Image.asset(AssetPaths.titleFgBase),

            /// Fg-Receive
            _LitImage(
              imgSrc: AssetPaths.titleFgReceive,
              color: _orbColor,
              lightAmt: _finalReceiveLightAmt,
            ),

            /// Fg-Emit
            _LitImage(
              imgSrc: AssetPaths.titleFgEmit,
              color: _emitColor,
              lightAmt: _finalEmitLightAmt,
            ),

            /// UI
            Positioned.fill(
              child: TitleScreenUi(
                difficulty: _difficulty,
                onDifficultyFocused: _handleDifficultyFocused,
                onDifficultyPressed: _handleDifficultyPressed,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _LitImage extends StatelessWidget {
  const _LitImage({
    required this.color,
    required this.imgSrc,
    required this.lightAmt,
  });
  final Color color;
  final String imgSrc;
  final double lightAmt;

  @override
  Widget build(BuildContext context) {
    final hsl = HSLColor.fromColor(color);
    return Image.asset(
      imgSrc,
      color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),
      colorBlendMode: BlendMode.modulate,
    );
  }
}

यहां दो अलग-अलग कठिनाई वाले लेवल की सेटिंग का यूज़र इंटरफ़ेस (यूआई) दिया गया है. ध्यान दें कि ग्रेस्केल इमेज पर मास्क के तौर पर लागू किए गए, मुश्किल रंगों से असली लगने वाला और रिफ़्लेक्टिव इफ़ेक्ट मिलता है!

कोडलैब ऐप्लिकेशन, जिसमें सामान्य तौर पर होने वाली कठिनाई को चुना गया है. इसमें इमेज एसेट, बैंगनी और हरे-नीले रंग की हैं.

इस कोडलैब ऐप्लिकेशन में, हार्डकोर कलर की कठिनाई का लेवल चुना गया है. इसमें इमेज ऐसेट को हल्के नारंगी रंग में रंगा गया है.

'शुरू करें' बटन जोड़ें

  1. title_screen_ui.dart फ़ाइल अपडेट करें. TitleScreenUi विजेट में, यह जोड़ें:

lib/title_screen/title_screen_ui.dart

class TitleScreenUi extends StatelessWidget {
  const TitleScreenUi({
    super.key,
    required this.difficulty,
    required this.onDifficultyPressed,
    required this.onDifficultyFocused,
  });

  final int difficulty;
  final void Function(int difficulty) onDifficultyPressed;
  final void Function(int? difficulty) onDifficultyFocused;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),
      child: Stack(
        children: [
          /// Title Text
          const TopLeft(
            child: UiScaler(
              alignment: Alignment.topLeft,
              child: _TitleText(),
            ),
          ),

          /// Difficulty Btns
          BottomLeft(
            child: UiScaler(
              alignment: Alignment.bottomLeft,
              child: _DifficultyBtns(
                difficulty: difficulty,
                onDifficultyPressed: onDifficultyPressed,
                onDifficultyFocused: onDifficultyFocused,
              ),
            ),
          ),

          /// StartBtn
          BottomRight(                                    // Add from here...
            child: UiScaler(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 20, right: 40),
                child: _StartBtn(onPressed: () {}),
              ),
            ),
          ),                                              // to here.
        ],
      ),
    );
  }
}
  1. 'शुरू करें' बटन लागू करने के लिए, यह विजेट जोड़ें:

lib/title_screen/title_screen_ui.dart

class _StartBtn extends StatefulWidget {
  const _StartBtn({required this.onPressed});
  final VoidCallback onPressed;

  @override
  State<_StartBtn> createState() => _StartBtnState();
}

class _StartBtnState extends State<_StartBtn> {
  AnimationController? _btnAnim;
  bool _wasHovered = false;

  @override
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
      cursor: SystemMouseCursors.click,
      onPressed: widget.onPressed,
      builder: (_, state) {
        if ((state.isHovered || state.isFocused) &&
            !_wasHovered &&
            _btnAnim?.status != AnimationStatus.forward) {
          _btnAnim?.forward(from: 0);
        }
        _wasHovered = (state.isHovered || state.isFocused);
        return SizedBox(
          width: 520,
          height: 100,
          child: Stack(
            children: [
              Positioned.fill(child: Image.asset(AssetPaths.titleStartBtn)),
              if (state.isHovered || state.isFocused) ...[
                Positioned.fill(
                    child: Image.asset(AssetPaths.titleStartBtnHover)),
              ],
              Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text('START MISSION',
                        style: TextStyles.btn
                            .copyWith(fontSize: 24, letterSpacing: 18)),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

यह ऐप्लिकेशन, बटनों के पूरे कलेक्शन के साथ चल रहा है.

कोडलैब ऐप्लिकेशन, जिसमें सामान्य कठिनाई का लेवल चुना गया है, जिसमें टाइटल, कठिनाई का लेवल, और &#39;शुरू करें&#39; बटन दिख रहा है.

5. ऐनिमेशन जोड़ें

इस चरण में, आर्ट ऐसेट के लिए यूज़र इंटरफ़ेस और कलर ट्रांज़िशन को ऐनिमेट किया जाता है.

शीर्षक में फ़ेड करें

इस चरण में, Flutter ऐप्लिकेशन को ऐनिमेट करने के लिए अलग-अलग तरीकों का इस्तेमाल किया जाता है. इनमें से एक तरीका है flutter_animate का इस्तेमाल करना. इस पैकेज से चलने वाले ऐनिमेशन, ऐप्लिकेशन को फिर से लोड करने पर अपने-आप फिर से चल सकते हैं. इससे, ऐप्लिकेशन के डेवलपमेंट की रफ़्तार तेज़ी से बढ़ाने में मदद मिलती है.

  1. lib/main.dart के कोड में इस तरह से बदलाव करें:

lib/main.dart

import 'dart:io' show Platform;

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';   // Add this import
import 'package:window_size/window_size.dart';

import 'title_screen/title_screen.dart';

void main() {
  if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {
    WidgetsFlutterBinding.ensureInitialized();
    setWindowMinSize(const Size(800, 500));
  }
  Animate.restartOnHotReload = true;                     // Add this line
  runApp(const NextGenApp());
}

class NextGenApp extends StatelessWidget {
  const NextGenApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: const TitleScreen(),
    );
  }
}
  1. flutter_animate पैकेज का फ़ायदा पाने के लिए, आपको इसे इंपोर्ट करना होगा. इंपोर्ट को lib/title_screen/title_screen_ui.dart में इस तरह जोड़ें:

lib/title_screen/title_screen_ui.dart

import 'package:extra_alignments/extra_alignments.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';   // Add this import
import 'package:focusable_control_builder/focusable_control_builder.dart';
import 'package:gap/gap.dart';

import '../assets.dart';
import '../common/ui_scaler.dart';
import '../styles.dart';

class TitleScreenUi extends StatelessWidget {
  1. _TitleText विजेट में बदलाव करके, टाइटल में ऐनिमेशन जोड़ें. इसके लिए, यह तरीका अपनाएं:

lib/title_screen/title_screen_ui.dart

class _TitleText extends StatelessWidget {
  const _TitleText();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Gap(20),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Transform.translate(
              offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),
              child: Text('OUTPOST', style: TextStyles.h1),
            ),
            Image.asset(AssetPaths.titleSelectedLeft, height: 65),
            Text('57', style: TextStyles.h2),
            Image.asset(AssetPaths.titleSelectedRight, height: 65),
          ],                                             // Edit from here...
        ).animate().fadeIn(delay: .8.seconds, duration: .7.seconds),
        Text('INTO THE UNKNOWN', style: TextStyles.h3)
            .animate()
            .fadeIn(delay: 1.seconds, duration: .7.seconds),
      ],                                                 // to here.
    );
  }
}
  1. टाइटल को फ़ेड इन देखने के लिए, फिर से लोड करें बटन दबाएं.

कठिनाई वाले बटन में फ़ेड करें

  1. नीचे बताए गए तरीके से _DifficultyBtns विजेट में बदलाव करके, कठिनाई वाले बटन के शुरुआती तौर पर ऐनिमेशन जोड़ें:

lib/title_screen/title_screen_ui.dart

class _DifficultyBtns extends StatelessWidget {
  const _DifficultyBtns({
    required this.difficulty,
    required this.onDifficultyPressed,
    required this.onDifficultyFocused,
  });

  final int difficulty;
  final void Function(int difficulty) onDifficultyPressed;
  final void Function(int? difficulty) onDifficultyFocused;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _DifficultyBtn(
          label: 'Casual',
          selected: difficulty == 0,
          onPressed: () => onDifficultyPressed(0),
          onHover: (over) => onDifficultyFocused(over ? 0 : null),
        )                                                // Add from here...
            .animate()
            .fadeIn(delay: 1.3.seconds, duration: .35.seconds)
            .slide(begin: const Offset(0, .2)),          // to here
        _DifficultyBtn(
          label: 'Normal',
          selected: difficulty == 1,
          onPressed: () => onDifficultyPressed(1),
          onHover: (over) => onDifficultyFocused(over ? 1 : null),
        )                                                // Add from here...
            .animate()
            .fadeIn(delay: 1.5.seconds, duration: .35.seconds)
            .slide(begin: const Offset(0, .2)),          // to here
        _DifficultyBtn(
          label: 'Hardcore',
          selected: difficulty == 2,
          onPressed: () => onDifficultyPressed(2),
          onHover: (over) => onDifficultyFocused(over ? 2 : null),
        )                                                // Add from here...
            .animate()
            .fadeIn(delay: 1.7.seconds, duration: .35.seconds)
            .slide(begin: const Offset(0, .2)),          // to here
        const Gap(20),
      ],
    );
  }
}
  1. बोनस के रूप में ऊपर की ओर स्लाइड करके कठिनाई का लेवल देखने के लिए, फिर से लोड करें बटन दबाएं.

'शुरू करें' बटन में फ़ेड करें

  1. _StartBtnState स्थिति क्लास में बदलाव करके, 'शुरू करें' बटन में ऐनिमेशन जोड़ें. इसके लिए, यह तरीका अपनाएं:

lib/title_screen/title_screen_ui.dart

class _StartBtnState extends State<_StartBtn> {
  AnimationController? _btnAnim;
  bool _wasHovered = false;

  @override
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
      cursor: SystemMouseCursors.click,
      onPressed: widget.onPressed,
      builder: (_, state) {
        if ((state.isHovered || state.isFocused) &&
            !_wasHovered &&
            _btnAnim?.status != AnimationStatus.forward) {
          _btnAnim?.forward(from: 0);
        }
        _wasHovered = (state.isHovered || state.isFocused);
        return SizedBox(
          width: 520,
          height: 100,
          child: Stack(
            children: [
              Positioned.fill(child: Image.asset(AssetPaths.titleStartBtn)),
              if (state.isHovered || state.isFocused) ...[
                Positioned.fill(
                    child: Image.asset(AssetPaths.titleStartBtnHover)),
              ],
              Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text('START MISSION',
                        style: TextStyles.btn
                            .copyWith(fontSize: 24, letterSpacing: 18)),
                  ],
                ),
              ),
            ],
          )                                              // Edit from here...
              .animate(autoPlay: false, onInit: (c) => _btnAnim = c)
              .shimmer(duration: .7.seconds, color: Colors.black),
        )
            .animate()
            .fadeIn(delay: 2.3.seconds)
            .slide(begin: const Offset(0, .2));
      },                                                 // to here.
    );
  }
}
  1. बोनस के रूप में ऊपर की ओर स्लाइड करके कठिनाई का लेवल देखने के लिए, फिर से लोड करें बटन दबाएं.

कठिनाई के लेवल पर कर्सर घुमाने वाले इफ़ेक्ट को ऐनिमेट करें

कठिनाई वाले बटन के साथ ऐनिमेशन जोड़ें' _DifficultyBtn स्टेट क्लास में बदलाव करके कर्सर घुमाने पर, यह तरीका अपनाएं:

lib/title_screen/title_screen_ui.dart

class _DifficultyBtn extends StatelessWidget {
  const _DifficultyBtn({
    required this.selected,
    required this.onPressed,
    required this.onHover,
    required this.label,
  });
  final String label;
  final bool selected;
  final VoidCallback onPressed;
  final void Function(bool hasFocus) onHover;

  @override
  Widget build(BuildContext context) {
    return FocusableControlBuilder(
      onPressed: onPressed,
      onHoverChanged: (_, state) => onHover.call(state.isHovered),
      builder: (_, state) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            width: 250,
            height: 60,
            child: Stack(
              children: [
                /// Bg with fill and outline
                AnimatedOpacity(                         // Edit from here
                  opacity: (!selected && (state.isHovered || state.isFocused))
                      ? 1
                      : 0,
                  duration: .3.seconds,
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color(0xFF00D1FF).withOpacity(.1),
                      border: Border.all(color: Colors.white, width: 5),
                    ),
                  ),
                ),                                       // to here.

                if (state.isHovered || state.isFocused) ...[
                  Container(
                    decoration: BoxDecoration(
                      color: const Color(0xFF00D1FF).withOpacity(.1),
                    ),
                  ),
                ],

                /// cross-hairs (selected state)
                if (selected) ...[
                  CenterLeft(
                    child: Image.asset(AssetPaths.titleSelectedLeft),
                  ),
                  CenterRight(
                    child: Image.asset(AssetPaths.titleSelectedRight),
                  ),
                ],

                /// Label
                Center(
                  child: Text(label.toUpperCase(), style: TextStyles.btn),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

जब माउस किसी ऐसे बटन पर घूमता है जिसे नहीं चुना गया है, तो कठिनाई वाले बटन अब BoxDecoration दिखाते हैं.

रंग बदलने को ऐनिमेट करें

  1. बैकग्राउंड का रंग तुरंत बदलने वाला होता है. रंग स्कीम के बीच प्रकाशित इमेज को ऐनिमेट करना बेहतर होता है. lib/title_screen/title_screen.dart में flutter_animate जोड़ें:

lib/title_screen/title_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';    // Add this import

import '../assets.dart';
import '../styles.dart';
import 'title_screen_ui.dart';

class TitleScreen extends StatefulWidget {
  1. lib/title_screen/title_screen.dart में एक _AnimatedColors विजेट जोड़ें:

lib/title_screen/title_screen.dart

class _AnimatedColors extends StatelessWidget {
  const _AnimatedColors({
    required this.emitColor,
    required this.orbColor,
    required this.builder,
  });

  final Color emitColor;
  final Color orbColor;

  final Widget Function(BuildContext context, Color orbColor, Color emitColor)
      builder;

  @override
  Widget build(BuildContext context) {
    final duration = .5.seconds;
    return TweenAnimationBuilder(
      tween: ColorTween(begin: emitColor, end: emitColor),
      duration: duration,
      builder: (_, emitColor, __) {
        return TweenAnimationBuilder(
          tween: ColorTween(begin: orbColor, end: orbColor),
          duration: duration,
          builder: (context, orbColor, __) {
            return builder(context, orbColor!, emitColor!);
          },
        );
      },
    );
  }
}
  1. चमकीली इमेज के रंगों को ऐनिमेट करने के लिए, अभी बनाए गए विजेट का इस्तेमाल करें. इसके लिए, _TitleScreenState में build तरीका अपडेट करें. इसके लिए, यह तरीका अपनाएं:

lib/title_screen/title_screen.dart

class _TitleScreenState extends State<TitleScreen> {
  Color get _emitColor =>
      AppColors.emitColors[_difficultyOverride ?? _difficulty];
  Color get _orbColor =>
      AppColors.orbColors[_difficultyOverride ?? _difficulty];

  /// Currently selected difficulty
  int _difficulty = 0;

  /// Currently focused difficulty (if any)
  int? _difficultyOverride;

  void _handleDifficultyPressed(int value) {
    setState(() => _difficulty = value);
  }

  void _handleDifficultyFocused(int? value) {
    setState(() => _difficultyOverride = value);
  }

  final _finalReceiveLightAmt = 0.7;
  final _finalEmitLightAmt = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: _AnimatedColors(                           // Edit from here...
          orbColor: _orbColor,
          emitColor: _emitColor,
          builder: (_, orbColor, emitColor) {
            return Stack(
              children: [
                /// Bg-Base
                Image.asset(AssetPaths.titleBgBase),

                /// Bg-Receive
                _LitImage(
                  color: orbColor,
                  imgSrc: AssetPaths.titleBgReceive,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Mg-Base
                _LitImage(
                  imgSrc: AssetPaths.titleMgBase,
                  color: orbColor,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Mg-Receive
                _LitImage(
                  imgSrc: AssetPaths.titleMgReceive,
                  color: orbColor,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Mg-Emit
                _LitImage(
                  imgSrc: AssetPaths.titleMgEmit,
                  color: emitColor,
                  lightAmt: _finalEmitLightAmt,
                ),

                /// Fg-Rocks
                Image.asset(AssetPaths.titleFgBase),

                /// Fg-Receive
                _LitImage(
                  imgSrc: AssetPaths.titleFgReceive,
                  color: orbColor,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Fg-Emit
                _LitImage(
                  imgSrc: AssetPaths.titleFgEmit,
                  color: emitColor,
                  lightAmt: _finalEmitLightAmt,
                ),

                /// UI
                Positioned.fill(
                  child: TitleScreenUi(
                    difficulty: _difficulty,
                    onDifficultyFocused: _handleDifficultyFocused,
                    onDifficultyPressed: _handleDifficultyPressed,
                  ),
                ),
              ],
            ).animate().fadeIn(duration: 1.seconds, delay: .3.seconds);
          },
        ),                                                // to here.
      ),
    );
  }
}

इस बदलाव के बाद, आपने स्क्रीन पर मौजूद हर एलिमेंट के साथ ऐनिमेशन जोड़े और यह काफ़ी बेहतर दिख रहा है!

6. फ़्रैगमेंट शेडर जोड़ना

इस चरण में आपको ऐप्लिकेशन में फ़्रैगमेंट शेडर जोड़ते हैं. सबसे पहले, टाइटल में बदलाव करने के लिए शेडर का इस्तेमाल किया जाता है, ताकि उसे ज़्यादा डिस्टोपियन फ़ील किया जा सके. इसके बाद, एक ओर्ब बनाने के लिए दूसरा शेडर जोड़ा जाता है, जो पेज का सेंट्रल फ़ोकल पॉइंट होता है.

फ़्रैगमेंट शेडर की मदद से टाइटल को डिस्टॉर्टेड करना

इस बदलाव के साथ provider पैकेज की जानकारी मिलती है. इससे, कंपाइल किए गए शेडर को विजेट ट्री में पास किया जा सकता है. अगर आपको शेडर लोड करने के तरीके में दिलचस्पी है, तो lib/assets.dart में लागू करने की प्रोसेस देखें.

  1. lib/main.dart के कोड में इस तरह से बदलाव करें:

lib/main.dart

import 'dart:io' show Platform;

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:provider/provider.dart';                 // Add this import
import 'package:window_size/window_size.dart';

import 'assets.dart';                                    // Add this import
import 'title_screen/title_screen.dart';

void main() {
  if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {
    WidgetsFlutterBinding.ensureInitialized();
    setWindowMinSize(const Size(800, 500));
  }
  Animate.restartOnHotReload = true;
  runApp(                                                // Edit from here...
    FutureProvider<FragmentPrograms?>(
      create: (context) => loadFragmentPrograms(),
      initialData: null,
      child: const NextGenApp(),
    ),
  );                                                     // to here.
}

class NextGenApp extends StatelessWidget {
  const NextGenApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: const TitleScreen(),
    );
  }
}
  1. provider पैकेज और step_01 में शामिल शेडर यूटिलिटी का फ़ायदा उठाने के लिए, आपको उन्हें इंपोर्ट करना होगा. lib/title_screen/title_screen_ui.dart में नए इंपोर्ट को इस तरह जोड़ें:

lib/title_screen/title_screen_ui.dart

import 'package:extra_alignments/extra_alignments.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:focusable_control_builder/focusable_control_builder.dart';
import 'package:gap/gap.dart';
import 'package:provider/provider.dart';                 // Add this import

import '../assets.dart';
import '../common/shader_effect.dart';                   // And this import
import '../common/ticking_builder.dart';                 // And this import
import '../common/ui_scaler.dart';
import '../styles.dart';

class TitleScreenUi extends StatelessWidget {
  1. इस तरीके से _TitleText विजेट में बदलाव करके, शेडर का इस्तेमाल करके टाइटल को डिस्टॉर्ट करें:

lib/title_screen/title_screen_ui.dart

class _TitleText extends StatelessWidget {
  const _TitleText();

  @override
  Widget build(BuildContext context) {
    Widget content = Column(                             // Modify this line
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Gap(20),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Transform.translate(
              offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),
              child: Text('OUTPOST', style: TextStyles.h1),
            ),
            Image.asset(AssetPaths.titleSelectedLeft, height: 65),
            Text('57', style: TextStyles.h2),
            Image.asset(AssetPaths.titleSelectedRight, height: 65),
          ],
        ).animate().fadeIn(delay: .8.seconds, duration: .7.seconds),
        Text('INTO THE UNKNOWN', style: TextStyles.h3)
            .animate()
            .fadeIn(delay: 1.seconds, duration: .7.seconds),
      ],
    );
    return Consumer<FragmentPrograms?>(                  // Add from here...
      builder: (context, fragmentPrograms, _) {
        if (fragmentPrograms == null) return content;
        return TickingBuilder(
          builder: (context, time) {
            return AnimatedSampler(
              (image, size, canvas) {
                const double overdrawPx = 30;
                final shader = fragmentPrograms.ui.fragmentShader();
                shader
                  ..setFloat(0, size.width)
                  ..setFloat(1, size.height)
                  ..setFloat(2, time)
                  ..setImageSampler(0, image);
                Rect rect = Rect.fromLTWH(-overdrawPx, -overdrawPx,
                    size.width + overdrawPx, size.height + overdrawPx);
                canvas.drawRect(rect, Paint()..shader = shader);
              },
              child: content,
            );
          },
        );
      },
    );                                                   // to here.
  }
}

आपको टाइटल डिस्टॉर्ट दिखना चाहिए—जैसा कि आपको उम्मीद है कि आने वाले समय में डिस्टोपियन आने वाले समय में ऐसा हो सकता है.

ऑर्ब जोड़ें

अब विंडो के बीच में ऑर्ब जोड़ें. आपको स्टार्ट बटन पर onPressed कॉलबैक जोड़ना होगा.

  1. lib/title_screen/title_screen_ui.dart में, TitleScreenUi को इस तरह बदलें:

lib/title_screen/title_screen_ui.dart

class TitleScreenUi extends StatelessWidget {
  const TitleScreenUi({
    super.key,
    required this.difficulty,
    required this.onDifficultyPressed,
    required this.onDifficultyFocused,
    required this.onStartPressed,                         // Add this argument
  });

  final int difficulty;
  final void Function(int difficulty) onDifficultyPressed;
  final void Function(int? difficulty) onDifficultyFocused;
  final VoidCallback onStartPressed;                      // Add this attribute

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),
      child: Stack(
        children: [
          /// Title Text
          const TopLeft(
            child: UiScaler(
              alignment: Alignment.topLeft,
              child: _TitleText(),
            ),
          ),

          /// Difficulty Btns
          BottomLeft(
            child: UiScaler(
              alignment: Alignment.bottomLeft,
              child: _DifficultyBtns(
                difficulty: difficulty,
                onDifficultyPressed: onDifficultyPressed,
                onDifficultyFocused: onDifficultyFocused,
              ),
            ),
          ),

          /// StartBtn
          BottomRight(
            child: UiScaler(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 20, right: 40),
                child: _StartBtn(onPressed: onStartPressed),  // Edit this line
              ),
            ),
          ),
        ],
      ),
    );
  }
}

अब आपने कॉलबैक के साथ 'शुरू करें' बटन में बदलाव कर लिया है, इसलिए आपको lib/title_screen/title_screen.dart फ़ाइल में बड़े बदलाव करने होंगे.

  1. इंपोर्ट में इस तरीके से बदलाव करें:

lib/title_screen/title_screen.dart

import 'dart:math';                                       // Add this import
import 'dart:ui';                                         // And this import

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';                   // Add this import
import 'package:flutter_animate/flutter_animate.dart';

import '../assets.dart';
import '../orb_shader/orb_shader_config.dart';            // And this import
import '../orb_shader/orb_shader_widget.dart';            // And this import too
import '../styles.dart';
import 'title_screen_ui.dart';

class TitleScreen extends StatefulWidget {
  1. नीचे दी गई वैल्यू से मैच करने के लिए, _TitleScreenState में बदलाव करें. क्लास के करीब-करीब हर हिस्से में किसी न किसी तरह का बदलाव किया गया है.

lib/title_screen/title_screen.dart

class _TitleScreenState extends State<TitleScreen>
    with SingleTickerProviderStateMixin {
  final _orbKey = GlobalKey<OrbShaderWidgetState>();

  /// Editable Settings
  /// 0-1, receive lighting strength
  final _minReceiveLightAmt = .35;
  final _maxReceiveLightAmt = .7;

  /// 0-1, emit lighting strength
  final _minEmitLightAmt = .5;
  final _maxEmitLightAmt = 1;

  /// Internal
  var _mousePos = Offset.zero;

  Color get _emitColor =>
      AppColors.emitColors[_difficultyOverride ?? _difficulty];
  Color get _orbColor =>
      AppColors.orbColors[_difficultyOverride ?? _difficulty];

  /// Currently selected difficulty
  int _difficulty = 0;

  /// Currently focused difficulty (if any)
  int? _difficultyOverride;
  double _orbEnergy = 0;
  double _minOrbEnergy = 0;

  double get _finalReceiveLightAmt {
    final light =
        lerpDouble(_minReceiveLightAmt, _maxReceiveLightAmt, _orbEnergy) ?? 0;
    return light + _pulseEffect.value * .05 * _orbEnergy;
  }

  double get _finalEmitLightAmt {
    return lerpDouble(_minEmitLightAmt, _maxEmitLightAmt, _orbEnergy) ?? 0;
  }

  late final _pulseEffect = AnimationController(
    vsync: this,
    duration: _getRndPulseDuration(),
    lowerBound: -1,
    upperBound: 1,
  );

  Duration _getRndPulseDuration() => 100.ms + 200.ms * Random().nextDouble();

  double _getMinEnergyForDifficulty(int difficulty) => switch (difficulty) {
        1 => 0.3,
        2 => 0.6,
        _ => 0,
      };


  @override
  void initState() {
    super.initState();
    _pulseEffect.forward();
    _pulseEffect.addListener(_handlePulseEffectUpdate);
  }

  void _handlePulseEffectUpdate() {
    if (_pulseEffect.status == AnimationStatus.completed) {
      _pulseEffect.reverse();
      _pulseEffect.duration = _getRndPulseDuration();
    } else if (_pulseEffect.status == AnimationStatus.dismissed) {
      _pulseEffect.duration = _getRndPulseDuration();
      _pulseEffect.forward();
    }
  }

  void _handleDifficultyPressed(int value) {
    setState(() => _difficulty = value);
    _bumpMinEnergy();
  }

  Future<void> _bumpMinEnergy([double amount = 0.1]) async {
    setState(() {
      _minOrbEnergy = _getMinEnergyForDifficulty(_difficulty) + amount;
    });
    await Future<void>.delayed(.2.seconds);
    setState(() {
      _minOrbEnergy = _getMinEnergyForDifficulty(_difficulty);
    });
  }

  void _handleStartPressed() => _bumpMinEnergy(0.3);

  void _handleDifficultyFocused(int? value) {
    setState(() {
      _difficultyOverride = value;
      if (value == null) {
        _minOrbEnergy = _getMinEnergyForDifficulty(_difficulty);
      } else {
        _minOrbEnergy = _getMinEnergyForDifficulty(value);
      }
    });
  }

  /// Update mouse position so the orbWidget can use it, doing it here prevents
  /// btns from blocking the mouse-move events in the widget itself.
  void _handleMouseMove(PointerHoverEvent e) {
    setState(() {
      _mousePos = e.localPosition;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: MouseRegion(
          onHover: _handleMouseMove,
          child: _AnimatedColors(
            orbColor: _orbColor,
            emitColor: _emitColor,
            builder: (_, orbColor, emitColor) {
              return Stack(
                children: [
                  /// Bg-Base
                  Image.asset(AssetPaths.titleBgBase),

                  /// Bg-Receive
                  _LitImage(
                    color: orbColor,
                    imgSrc: AssetPaths.titleBgReceive,
                    pulseEffect: _pulseEffect,
                    lightAmt: _finalReceiveLightAmt,
                  ),

                  /// Orb
                  Positioned.fill(
                    child: Stack(
                      children: [
                        // Orb
                        OrbShaderWidget(
                          key: _orbKey,
                          mousePos: _mousePos,
                          minEnergy: _minOrbEnergy,
                          config: OrbShaderConfig(
                            ambientLightColor: orbColor,
                            materialColor: orbColor,
                            lightColor: orbColor,
                          ),
                          onUpdate: (energy) => setState(() {
                            _orbEnergy = energy;
                          }),
                        ),
                      ],
                    ),
                  ),

                  /// Mg-Base
                  _LitImage(
                    imgSrc: AssetPaths.titleMgBase,
                    color: orbColor,
                    pulseEffect: _pulseEffect,
                    lightAmt: _finalReceiveLightAmt,
                  ),

                  /// Mg-Receive
                  _LitImage(
                    imgSrc: AssetPaths.titleMgReceive,
                    color: orbColor,
                    pulseEffect: _pulseEffect,
                    lightAmt: _finalReceiveLightAmt,
                  ),

                  /// Mg-Emit
                  _LitImage(
                    imgSrc: AssetPaths.titleMgEmit,
                    color: emitColor,
                    pulseEffect: _pulseEffect,
                    lightAmt: _finalEmitLightAmt,
                  ),

                  /// Fg-Rocks
                  Image.asset(AssetPaths.titleFgBase),

                  /// Fg-Receive
                  _LitImage(
                    imgSrc: AssetPaths.titleFgReceive,
                    color: orbColor,
                    pulseEffect: _pulseEffect,
                    lightAmt: _finalReceiveLightAmt,
                  ),

                  /// Fg-Emit
                  _LitImage(
                    imgSrc: AssetPaths.titleFgEmit,
                    color: emitColor,
                    pulseEffect: _pulseEffect,
                    lightAmt: _finalEmitLightAmt,
                  ),

                  /// UI
                  Positioned.fill(
                    child: TitleScreenUi(
                      difficulty: _difficulty,
                      onDifficultyFocused: _handleDifficultyFocused,
                      onDifficultyPressed: _handleDifficultyPressed,
                      onStartPressed: _handleStartPressed,
                    ),
                  ),
                ],
              ).animate().fadeIn(duration: 1.seconds, delay: .3.seconds);
            },
          ),
        ),
      ),
    );
  }
}
  1. _LitImage में इस तरह से बदलाव करें:

lib/title_screen/title_screen.dart

class _LitImage extends StatelessWidget {
  const _LitImage({
    required this.color,
    required this.imgSrc,
    required this.pulseEffect,                            // Add this parameter
    required this.lightAmt,
  });
  final Color color;
  final String imgSrc;
  final AnimationController pulseEffect;                  // Add this attribute
  final double lightAmt;

  @override
  Widget build(BuildContext context) {
    final hsl = HSLColor.fromColor(color);
    return ListenableBuilder(                             // Edit from here...
      listenable: pulseEffect,
      builder: (context, child) {
        return Image.asset(
          imgSrc,
          color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),
          colorBlendMode: BlendMode.modulate,
        );
      },
    );                                                    // to here.
  }
}

यह इस अतिरिक्त का परिणाम है.

7. पार्टिकल ऐनिमेशन जोड़ें

इस चरण में, ऐप्लिकेशन में छोटे-छोटे पार्टिकल ऐनिमेशन जोड़ें, ताकि ऐप्लिकेशन में आपको शानदार मूवमेंट मिले.

हर जगह कण जोड़ें

  1. एक नई lib/title_screen/particle_overlay.dart फ़ाइल बनाएं और फिर यह कोड जोड़ें:

lib/title_screen/particle_overlay.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:particle_field/particle_field.dart';
import 'package:rnd/rnd.dart';

class ParticleOverlay extends StatelessWidget {
  const ParticleOverlay({super.key, required this.color, required this.energy});

  final Color color;
  final double energy;

  @override
  Widget build(BuildContext context) {
    return ParticleField(
      spriteSheet: SpriteSheet(
        image: const AssetImage('assets/images/particle-wave.png'),
      ),
      // blend the image's alpha with the specified color:
      blendMode: BlendMode.dstIn,

      // this runs every tick:
      onTick: (controller, _, size) {
        List<Particle> particles = controller.particles;

        // add a new particle with random angle, distance & velocity:
        double a = rnd(pi * 2);
        double dist = rnd(1, 4) * 35 + 150 * energy;
        double vel = rnd(1, 2) * (1 + energy * 1.8);
        particles.add(Particle(
          // how many ticks this particle will live:
          lifespan: rnd(1, 2) * 20 + energy * 15,
          // starting distance from center:
          x: cos(a) * dist,
          y: sin(a) * dist,
          // starting velocity:
          vx: cos(a) * vel,
          vy: sin(a) * vel,
          // other starting values:
          rotation: a,
          scale: rnd(1, 2) * 0.6 + energy * 0.5,
        ));

        // update all of the particles:
        for (int i = particles.length - 1; i >= 0; i--) {
          Particle p = particles[i];
          if (p.lifespan <= 0) {
            // particle is expired, remove it:
            particles.removeAt(i);
            continue;
          }
          p.update(
            scale: p.scale * 1.025,
            vx: p.vx * 1.025,
            vy: p.vy * 1.025,
            color: color.withOpacity(p.lifespan * 0.001 + 0.01),
            lifespan: p.lifespan - 1,
          );
        }
      },
    );
  }
}
  1. lib/title_screen/title_screen.dart के लिए इंपोर्ट में इस तरीके से बदलाव करें:

lib/title_screen/title_screen.dart

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animate/flutter_animate.dart';

import '../assets.dart';
import '../orb_shader/orb_shader_config.dart';
import '../orb_shader/orb_shader_widget.dart';
import '../styles.dart';
import 'particle_overlay.dart';                          // Add this import
import 'title_screen_ui.dart';

class TitleScreen extends StatefulWidget {
  1. ParticleOverlay को यूज़र इंटरफ़ेस (यूआई) में जोड़ने के लिए, _TitleScreenState के build तरीके में बदलाव करें. इसका तरीका यहां बताया गया है:

lib/title_screen/title_screen.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: Center(
      child: MouseRegion(
        onHover: _handleMouseMove,
        child: _AnimatedColors(
          orbColor: _orbColor,
          emitColor: _emitColor,
          builder: (_, orbColor, emitColor) {
            return Stack(
              children: [
                /// Bg-Base
                Image.asset(AssetPaths.titleBgBase),

                /// Bg-Receive
                _LitImage(
                  color: orbColor,
                  imgSrc: AssetPaths.titleBgReceive,
                  pulseEffect: _pulseEffect,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Orb
                Positioned.fill(
                  child: Stack(
                    children: [
                      // Orb
                      OrbShaderWidget(
                        key: _orbKey,
                        mousePos: _mousePos,
                        minEnergy: _minOrbEnergy,
                        config: OrbShaderConfig(
                          ambientLightColor: orbColor,
                          materialColor: orbColor,
                          lightColor: orbColor,
                        ),
                        onUpdate: (energy) => setState(() {
                          _orbEnergy = energy;
                        }),
                      ),
                    ],
                  ),
                ),

                /// Mg-Base
                _LitImage(
                  imgSrc: AssetPaths.titleMgBase,
                  color: orbColor,
                  pulseEffect: _pulseEffect,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Mg-Receive
                _LitImage(
                  imgSrc: AssetPaths.titleMgReceive,
                  color: orbColor,
                  pulseEffect: _pulseEffect,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Mg-Emit
                _LitImage(
                  imgSrc: AssetPaths.titleMgEmit,
                  color: emitColor,
                  pulseEffect: _pulseEffect,
                  lightAmt: _finalEmitLightAmt,
                ),

                /// Particle Field
                Positioned.fill(                          // Add from here...
                  child: IgnorePointer(
                    child: ParticleOverlay(
                      color: orbColor,
                      energy: _orbEnergy,
                    ),
                  ),
                ),                                        // to here.

                /// Fg-Rocks
                Image.asset(AssetPaths.titleFgBase),

                /// Fg-Receive
                _LitImage(
                  imgSrc: AssetPaths.titleFgReceive,
                  color: orbColor,
                  pulseEffect: _pulseEffect,
                  lightAmt: _finalReceiveLightAmt,
                ),

                /// Fg-Emit
                _LitImage(
                  imgSrc: AssetPaths.titleFgEmit,
                  color: emitColor,
                  pulseEffect: _pulseEffect,
                  lightAmt: _finalEmitLightAmt,
                ),

                /// UI
                Positioned.fill(
                  child: TitleScreenUi(
                    difficulty: _difficulty,
                    onDifficultyFocused: _handleDifficultyFocused,
                    onDifficultyPressed: _handleDifficultyPressed,
                    onStartPressed: _handleStartPressed,
                  ),
                ),
              ],
            ).animate().fadeIn(duration: 1.seconds, delay: .3.seconds);
          },
        ),
      ),
    ),
  );
}

आखिरी नतीजे में, कई प्लैटफ़ॉर्म पर ऐनिमेशन, फ़्रैगमेंट शेडर, और पार्टिकल इफ़ेक्ट शामिल होते हैं!

हर जगह छोटे-छोटे पार्टिकल जोड़ें—यहां तक कि वेब पर भी

कोड में एक छोटी सी समस्या है. जब Flutter को वेब पर चलाया जाता है, तो दो वैकल्पिक रेंडरिंग इंजन होते हैं: CanvasKit इंजन, जिसका इस्तेमाल डेस्कटॉप क्लास ब्राउज़र पर डिफ़ॉल्ट रूप से किया जाता है और दूसरा एचटीएमएल DOM रेंडरर, जिसका इस्तेमाल डिफ़ॉल्ट रूप से मोबाइल डिवाइसों के लिए किया जाता है. समस्या यह है कि एचटीएमएल DOM रेंडरर फ़्रैगमेंट शेडर पर काम नहीं करता है.

इस समस्या को ठीक करने के लिए सिर्फ़ CanvasKit रेंडरर का इस्तेमाल करके, वेब के लिए बनाया गया. ऐसा करने के लिए, बिल्ड कमांड में इस तरह फ़्लैग जोड़ें:

$ flutter build web --web-renderer canvaskit
Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 7692 bytes (99.5% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag
when building your app.
Font asset "CupertinoIcons.ttf" was tree-shaken, reducing it from 257628 to 1172 bytes (99.5% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when
building your app.
Compiling lib/main.dart for the Web...                             15.6s
✓ Built build/web

आपकी मेहनत की पूरी जानकारी इस बार Chrome ब्राउज़र में दिखाई गई है.

8. बधाई हो

आपने ऐनिमेशन, फ़्रैगमेंट शेडर, और पार्टिकल ऐनिमेशन के साथ, गेम की सभी सुविधाओं वाली इंट्रो स्क्रीन बनाई है! अब इन तकनीकों का इस्तेमाल उन सभी प्लैटफ़ॉर्म पर किया जा सकता है जिन पर Flutter काम करता है.

ज़्यादा जानें