143

आप स्प्लिट स्क्रीन में स्प्लैश स्क्रीन को जोड़ने के लिए कैसे पहुंचेंगे? इसे किसी अन्य सामग्री से पहले लोड और प्रदर्शित करना चाहिए। वर्तमान में स्कैफोल्ड (होम: एक्स) विजेट भार से पहले रंग का एक संक्षिप्त फ्लैश है।

flutter

— पीटर
स्रोत

मुझे नहीं पता कि क्या कस्टम टाइमर सेट करके स्प्लैश स्क्रीन को जोड़ने का इसका सही तरीका है, मुझे न तो प्रोसेसर बेकार रखना पसंद है, इसलिए कुछ आवश्यक कार्यों या निर्देशिकाओं की जाँच करने या कुछ लॉग्स को सिंक करने, या कुछ फ़ाइलों को बैकअप करने जैसे कार्यों को ध्यान में रखते हुए कुछ घर नहीं करना चाहिए। पृष्ठभूमि और मतलब समय में मोर्चे पर ब्रांडिंग करते हैं। सभी 3-4 सेकंड के बाद एक प्रोसेसर के लिए बहुत समय है।

— महेशमंज

1

यह लिंक बताता है कि यह कैसे करना है: flutter.dev/docs/development/ui/splash-screen/…

— live-love

250

मैं स्पंदन में स्प्लैश स्क्रीन करने के वास्तविक तरीके पर कुछ और प्रकाश लाना चाहता हूं।

मैंने यहाँ थोड़ा ट्रेस किया और मैंने देखा कि स्पंदन में स्प्लैश स्क्रीन के बारे में चीजें इतनी बुरी नहीं हैं।

हो सकता है कि अधिकांश देव (मेरे जैसे) यह सोच रहे हों कि फ़्लटर में डिफ़ॉल्ट रूप से स्प्लैश स्क्रीन नहीं है और उन्हें इसके बारे में कुछ करने की आवश्यकता है। एक स्प्लैश स्क्रीन है, लेकिन यह सफेद पृष्ठभूमि के साथ है और कोई भी यह नहीं समझ सकता है कि डिफ़ॉल्ट रूप से आईओएस और एंड्रॉइड के लिए पहले से ही एक स्प्लैश स्क्रीन है।

केवल एक चीज जो डेवलपर को करने की आवश्यकता है वह ब्रांडिंग छवि को सही जगह पर रखना है और स्प्लैश स्क्रीन उसी तरह काम करना शुरू कर देगी।

यहाँ आप इसे कैसे चरण दर चरण कर सकते हैं:

Android पर सबसे पहले (क्योंकि मेरा पसंदीदा प्लेटफ़ॉर्म है :))

अपने फ़्लटर प्रोजेक्ट में "एंड्रॉइड" फ़ोल्डर ढूंढें।
एप्लिकेशन को ब्राउज़ करें -> src -> मुख्य -> Res फ़ोल्डर और अपनी ब्रांडिंग छवि के सभी वेरिएंट को संबंधित फ़ोल्डरों में रखें। उदाहरण के लिए:

घनत्व 1 के साथ छवि को mipmap-mdpi में रखा जाना चाहिए,
घनत्व 1.5 के साथ छवि को mipmap-hdpi में रखा जाना चाहिए,
घनत्व 2 वाली छवि को mipmap-xdpi में रखा जाना चाहिए,
घनत्व 3 के साथ छवि को mipmap-xxdpi में रखा जाना चाहिए,
घनत्व 4 के साथ छवि को mipmap-xxxdpi में रखा जाना चाहिए,

डिफ़ॉल्ट रूप से एंड्रॉइड फोल्डर में ड्रॉएबल-एमडीपी, ड्रॉएबल-एचडीपीआई आदि नहीं होते हैं, लेकिन हम चाहें तो उन्हें बना सकते हैं। उस तथ्य के कारण छवियों को मिपमैप फ़ोल्डर में रखा जाना चाहिए। स्प्लैश स्क्रीन के बारे में डिफ़ॉल्ट एक्सएमएल कोड (एंड्रॉइड में) @ रीमरेबल रिसोर्स की जगह @mipmap का उपयोग करने वाला है (आप चाहें तो इसे बदल सकते हैं)।

एंड्रॉइड पर अंतिम चरण ड्रा करने योग्य / लॉन्च_बैकग्राउंड। Xml फ़ाइल में कुछ XML कोड को अनइंस्टॉल करना है। ऐप में ब्राउज़ करें -> src -> main -> res-> drawable and open launch_background.xml। इस फ़ाइल के अंदर, आप देखेंगे कि स्लैश स्क्रीन पृष्ठभूमि सफेद क्यों है। ब्रांडिंग छवि जिसे हमने चरण 2 में रखा था, उसे लागू करने के लिए, हमें आपके लॉन्च_बैकग्राउंड। Xml फ़ाइल में कुछ XML कोड को अनइंस्टॉल करना होगा। परिवर्तन के बाद, कोड जैसा दिखना चाहिए:
```
 

 <item>

     <bitmap
         android:gravity="center"
         android:src="@mipmap/your_image_name" />

 </item>
```

कृपया ध्यान दें कि हम सफेद पृष्ठभूमि के लिए XML कोड टिप्पणी करते हैं और mipmap छवि के बारे में कोड को अनसुना कर देते हैं। अगर किसी को दिलचस्पी है तो file launch_background.xml का उपयोग स्टाइल में किया जाता है। xml फ़ाइल।

IOS पर दूसरा:

अपने Flutter प्रोजेक्ट में "ios" फ़ोल्डर ढूंढें।
रनर को ब्राउज़ करें -> Assets.xcassets -> LaunchImage.imageset। LaunchImage.png, LaunchImage@2x.png, आदि होने चाहिए। अब आपको इन चित्रों को अपने ब्रांडिंग छवि संस्करण के साथ बदलना होगा। उदाहरण के लिए:

घनत्व 1 के साथ की छवि को LaunchImage.png को ओवरराइड करने की आवश्यकता है,
घनत्व 2 के साथ की छवि को LaunchImage@2x.png को ओवरराइड करने की आवश्यकता है,
घनत्व 3 के साथ छवि को LaunchImage@3x.png को ओवरराइड करने की आवश्यकता है,
घनत्व 4 की छवि के साथ LaunchImage@4x.png को ओवरराइड करने की आवश्यकता है,

अगर मैं गलत नहीं हूं तो LaunchImage@4x.png डिफ़ॉल्ट रूप से मौजूद नहीं है, लेकिन आप आसानी से एक बना सकते हैं। यदि LaunchImage@4x.png मौजूद नहीं है, तो आपको इसे Contents.json फ़ाइल में भी घोषित करना होगा, जो छवियों की तरह एक ही निर्देशिका में है। परिवर्तन के बाद मेरा Contents.json फ़ाइल इस तरह दिखता है:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

वह सब जो आपको चाहिए, अगली बार जब आप अपना ऐप चलाते हैं, तो एंड्रॉइड या आईओएस पर आपके पास ब्रांडिंग छवि के साथ सही स्प्लैश स्क्रीन होनी चाहिए जो आपने जोड़ी है।

धन्यवाद

— स्टोचो आंद्रीव
स्रोत

4

मुझे Cannot resolve symbol '@mipmap/ic_launcher'एंड्रॉइड स्टूडियो 3.1.1 (कैश पुनर्निर्माण के बाद भी) में त्रुटि मिली , हालांकि, ऐप को संकलित किया गया और त्रुटि के बिना चला गया, और लॉन्चर ग्राफिक प्रदर्शित किया गया।

— IanB

1

मेरे पास एक ही मुद्दा है, हालांकि, मैं इसे नहीं चला सकता क्योंकि रनटाइम पर यह दुर्घटनाग्रस्त हो जाता है और मुझे बताता है कि छवि गायब है। लेकिन यह किसी कारण से mipmap को हल नहीं कर सकता है। किसी को भी एक विचार है कि यह क्यों है?

— carlosx2

हाय दोस्तों, यह निश्चित नहीं है कि आपके पास यह मुद्दा क्यों है, लेकिन मेरे लिए प्रोजेक्ट सिंक समस्या की तरह दिखता है (संसाधन नहीं होने का कोई अन्य कारण नहीं है अगर यह वहां है)। मुझे नहीं पता कि इसे कैसे हल किया जाए क्योंकि मेरे पास यह मुद्दा कभी नहीं था, लेकिन प्रोजेक्ट को सिंक करने की कोशिश करें, साफ, पुनर्निर्माण करें आदि जो कभी भी आपके लिए संभव है। इसके अलावा ड्रा करने योग्य फ़ोल्डर में संसाधन का उपयोग करने की कोशिश करें और ड्रिपमैप एनोटेशन को ड्रॉबल एनोटेशन के साथ बदलें। मैं अभी अनुमान लगा रहा हूं :)

— स्टोचो एंड्रीव

1

क्यों आप 4x छवि जोड़ रहे हैं के रूप में उत्सुक। XCode केवल 3x की अपेक्षा करता है, क्या आप 4x को जोड़ने का कोई कारण है?

— sbilstein

3

आधिकारिक दस्तावेज में यह कवर किया गया है।

— रमलवीया

28

यदि आप flutter createअपनी परियोजना को पूरा करते हैं, तो आप https://flutter.io/assets-and-images/#updating-the-launch-screen पर चरणों का पालन कर सकते हैं ।

— xster
स्रोत

क्या मैं केवल छप स्क्रीन और / या अपने छप स्क्रीन जब माउस को अद्यतन करने के द्वारा hosed कर अपने माउस हो रही है? इस सटीक विधि का उपयोग ...?

— क्रिस

21

स्पंदन वास्तव में हमारे आवेदन में स्प्लैश स्क्रीन को जोड़ने का एक सरल तरीका देता है। जब हम अन्य एप्लिकेशन स्क्रीन डिज़ाइन करते हैं, तो हमें पहले एक मूल पृष्ठ डिज़ाइन करने की आवश्यकता होती है। आपको इसे एक स्टेटफुलगेट बनाने की आवश्यकता है क्योंकि यह राज्य कुछ ही सेकंड में बदल जाएगा।

import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

InitState () के अंदर तर्क , अवधि के साथ एक टाइमर () को कॉल करें , जैसा कि आप चाहते हैं, मैंने इसे 3 सेकंड किया, एक बार हमारे एप्लिकेशन के होम स्क्रीन पर नेविगेटर को धक्का दिया।

नोट: एप्लिकेशन को केवल एक बार छप स्क्रीन दिखाना चाहिए, उपयोगकर्ता को बैक बटन प्रेस पर फिर से वापस नहीं जाना चाहिए। इसके लिए, हम Navigator.pushReplacement () का उपयोग करते हैं , यह एक नई स्क्रीन पर जाएगा और पिछली स्क्रीन को नेविगेशन इतिहास स्टैक से हटा देगा।

बेहतर समझ के लिए, स्पंदन: अपनी खुद की स्प्लैश स्क्रीन डिज़ाइन करें

— kowsalya_ckar
स्रोत

7

इस कस्टम एक को दिखाने से पहले डिफ़ॉल्ट सफेद छप स्क्रीन अभी भी 1+ सेकंड के लिए दिखाई देगा। इसे खत्म करने के लिए उत्पन्न xcode और android प्रोजेक्ट में ओवरराइड करना होगा।

— d3vtoolsmith

हाँ। आईओएस और एंड्रॉइड में डिफॉल्ट स्पल्श स्क्रीन हमेशा दिखाई देगी, यह स्पंदन स्प्लैश स्क्रीन इसके अतिरिक्त है।

— महेश पेरी

बात यह है कि यह उदाहरण विश्वसनीय नहीं है .... यदि नेटवर्क कनेक्टिविटी जैसे कारणों से आपका ऐप 3 से अधिक के लिए लोड होता है?

— इमानुएल सांगा

अतिरिक्त अनुकूलन के लिए, मैं इस उत्तर का अधिक समर्थन करता हूं। मैं पहले एक दिखावा स्क्रीन प्रदर्शित करते हुए HTTP अनुरोध करना चाहता हूं। यह दृष्टिकोण कहीं अधिक आसान था

— इदरीस स्टैक

16

इसका एक अच्छा उदाहरण अभी तक नहीं है, लेकिन आप इसे प्रत्येक प्लेटफॉर्म के लिए देशी टूल का उपयोग करके स्वयं कर सकते हैं:

iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

स्प्लैश स्क्रीन के लिए उदाहरण कोड पर अपडेट के लिए 8147 जारी करने के लिए सदस्यता लें । यदि स्प्लैश स्क्रीन और iOS पर ऐप के बीच का काला झिलमिलाहट आपको परेशान करता है, तो अपडेट के लिए 8127 जारी करने के लिए सदस्यता लें ।

संपादित करें: 31 अगस्त, 2017 तक, स्प्लैश स्क्रीन के लिए बेहतर समर्थन अब नए प्रोजेक्ट टेम्पलेट में उपलब्ध है। # 11505 देखें ।

— कॉलिन जैक्सन
स्रोत

क्या एक उदाहरण है कि वास्तव में स्प्लैशस्क्रीन कैसे जोड़ा जाए। जब मैं नया टेम्प्लेट शुरू करता हूं तो मुझे स्प्लैशस्क्रीन दिखाई नहीं देती

— राइड सन

@RideSun कृपया मेरा उत्तर देखें

— स्टॉयचो एंड्रीव

1

मैं स्प्लैश-स्क्रीन को लंबे समय तक कैसे बना सकता हूं? क्या मुझे गतिविधि में कुछ कोड बदलना चाहिए?

— शून्य.झो.सेवेन

लेकिन मुझे और अधिक की आवश्यकता है जैसे कि छप के दौरान तब स्थानीय डीबी बनाना / आयात करना फिर केवल छप समाप्त होता है

— स्टिकओवरफ्लो

14

Android के लिए, Android> app> src> main> res> drawable> launcher_background.xml पर जाएं

अब इसे अनइंस्टॉल करें और अपनी छवि स्थान के साथ @ mipmap / launch_image बदलें ।

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

आप यहाँ अपनी स्क्रीन का रंग बदल सकते हैं -

<item android:drawable="@android:color/white" />

— स्मृति रंजन राणा
स्रोत

यह मेरे लिए काम करता है ... लेकिन iOS भाग ... इतना अच्छा नहीं खेल रहा है

— आयरिशग्रेनो

1

- इस की जाँच flutter.io/assets-and-images/#updating-the-launch-screen

— स्मृति रंजन राणा

मुझे यह समझ में आया ... जाहिर है कि iOS की छवि खराब थी। iOS और ANDROID दोनों अब सही काम करते हैं। झूठी अलार्म

— आयरिश गिंगो

@SrrutiRanjanRana इस छवि का आदर्श आकार क्या है?

— मैटियस

1

छवि स्थान का एक उदाहरण होने पर यह उत्तर बहुत अधिक सहायक होगा। अन्यथा उपयोगकर्ता को यह अनुमान लगाना होगा कि पथ को कैसे जोड़ा जाए।

— रॉबिन मानोली

12

स्पंदन में स्प्लैश स्क्रीन जोड़ने का सबसे आसान तरीका यह है: इस पैकेज: https://pub.dev/packages/flutter_native_splash

स्थापना गाइड (पैकेज के लेखक द्वारा):

1. स्प्लैश स्क्रीन सेट करना

अपनी सेटिंग्स को अपने प्रोजेक्ट के pubspec.yaml फ़ाइल में जोड़ें या अपने रूट प्रोजेक्ट फ़ोल्डर में एक फ़ाइल बनाएं जिसका नाम flutter_native_splash.yaml है।

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"

छवि एक png फ़ाइल होनी चाहिए।

आप # रंग में # उपयोग कर सकते हैं। color: "# 42a5f5" यदि आप किसी विशिष्ट प्लेटफ़ॉर्म के लिए स्प्लैश स्क्रीन नहीं बनाना चाहते हैं, तो आप Android या ios को भी सेट कर सकते हैं।

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

यदि आपकी छवि को सभी उपलब्ध स्क्रीन (चौड़ाई और ऊंचाई) का उपयोग करना चाहिए, तो आप भरण संपत्ति का उपयोग कर सकते हैं।

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

नोट: भरण संपत्ति अभी भी iOS स्प्लैश स्क्रीन के लिए लागू नहीं की गई है।

अगर आप Android पर फुल स्क्रीन स्प्लैश स्क्रीन को डिसेबल करना चाहते हैं तो आप android_disable_fullscreen प्रॉपर्टी का उपयोग कर सकते हैं।

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true

2. पैकेज चलाएँ

अपनी सेटिंग्स जोड़ने के बाद, पैकेज को चलाएं

flutter pub pub run flutter_native_splash:create जब पैकेज खत्म हो जाता है तो आपकी स्प्लैश स्क्रीन तैयार होती है।

— patreu22
स्रोत

8

आपको नीचे कोड की कोशिश करनी चाहिए, मेरे लिए काम किया

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

startTimeout() async {
  var duration = const Duration(seconds: 3);
  return new Timer(duration, handleTimeout);
}

@override
void initState() {
  // TODO: implement initState
  super.initState();

  _iconAnimationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 2000));

  _iconAnimation = new CurvedAnimation(
      parent: _iconAnimationController, curve: Curves.easeIn);
  _iconAnimation.addListener(() => this.setState(() {}));

  _iconAnimationController.forward();

  startTimeout();
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}

— जलधि भट्ट
स्रोत

क्या आप कृपया पूरा कोड (एक कोड जिसे हम अपने चर को परिभाषित करने की आवश्यकता के बिना स्वतंत्र रूप से चला सकते हैं) या जीथुब लिंक पोस्ट कर सकते हैं?

— biniam

8

ऐसे व्यक्ति जिन्हें त्रुटि जैसी छवि मिल रही है वे सत्यापित उत्तर को लागू करने के बाद नहीं पाते हैं कि आप @ mipmap / ic_launcher.png के बजाय @ mipmap / ic_launcher जोड़ रहे हैं

— एमडी सादाब वसीम
स्रोत

एक बार गलती पर अपना कर्सर हॉवर करने पर आपका आईडीई आपको यह बताएगा

— ओजोनुग्वा जूड ओचलिफु

7

@Collin जैक्सन और @Sniper दोनों ही सही हैं। क्रमशः Android और iOS में लॉन्च छवियों को सेट करने के लिए आप इन चरणों का पालन कर सकते हैं। फिर आपके initState () में MyApp () में, आप टाइमर सेट करने या किसी भी एप को कॉल करने के लिए Future.delayed का उपयोग कर सकते हैं। जब तक प्रतिक्रिया भविष्य से वापस नहीं हो जाती, तब तक आपके लॉन्च आइकन दिखाए जाएंगे और फिर जैसे ही प्रतिक्रिया आएगी, आप उस स्क्रीन पर जा सकते हैं जिसे आप छप स्क्रीन के बाद जाना चाहते हैं। आप इस लिंक को देख सकते हैं: स्पंदन स्प्लैश स्क्रीन

— विकास
स्रोत

1

कृपया, SO से बाहर किसी अन्य पेज से लिंक करते समय, मृत लिंक से बचने के लिए सामग्री का उत्तर देने वाला भाग यहां पोस्ट करें।

— rak007

4

नीचे दिए गए पेज को जोड़ना और रूट करना मदद कर सकता है

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.redAccent),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 50.0,
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.greenAccent,
                          size: 50.0,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        Flutkart.name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      Flutkart.store,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

यदि आप इसका अनुसरण करना चाहते हैं, तो देखें: https://www.youtube.com/watch?v=FNBuo-7zg2Q

— goops17
स्रोत

4

कई तरीके आप यह कर सकते हैं, लेकिन सबसे आसान जो मैं उपयोग करता हूं:

लॉन्च आइकॉन के लिए मैं स्पंदन लाइब्रेरी फ़्लटर लॉन्चर आइकन का उपयोग करता हूं

कस्टम स्प्लैश स्क्रीन के लिए मैं अलग-अलग स्क्रीन रिज़ॉल्यूशन बनाता हूं और फिर एंड्रॉइड के लिए रिज़ॉल्यूशन के अनुसार mipmap फ़ोल्डर में स्प्लैश इमेज को जोड़ देता हूं।

अंतिम भाग एंड्रॉइड में Res फ़ोल्डर में drawable फ़ोल्डर में launch_background.xml को समायोजित कर रहा है।

नीचे देखने के लिए बस अपना कोड बदलें:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- <item android:drawable="@android:color/white" />
    <item android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

कुछ देवों को मैंने छप को जोड़ने योग्य के रूप में देखा है, मैंने यह कोशिश की लेकिन किसी भी तरह से फ़्लटर 1.0.0 और डार्ट एसडीके 2.0+ में निर्माण विफल हो जाता है। इसलिए मैं बिटमैप सेक्शन में स्प्लैश जोड़ना पसंद करता हूं।

iOS स्पलैश-स्क्रीन निर्माण बल्कि सरल है।

IOS में रनर फ़ोल्डर में सिर्फ LaunchImage.png फ़ाइलों को अपने कस्टम स्प्लैश स्क्रीन छवियों के साथ LaunchImage.png @ 2x, @ 3x, @ 4x जैसे नामों से अपडेट करें।

इसके अलावा मैं एक अच्छा लग रहा है 4x छवि के रूप में अच्छी तरह से LaunchImage.imageset में। 4x स्केल विकल्प जोड़ने के लिए 3x स्केल के नीचे, नीचे दिए गए लाइनों के साथ अपने कोड को Content.json में अपडेट करें:

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

— प्रशांत गुप्ता
स्रोत

4

इस तरह से अपना मटीरियल ऐप बनाएं

=> निर्भरता जोड़ें

=> आयात आयात 'पैकेज: स्प्लैशस्क्रीन / स्प्लैशस्क्रीन.डार्ट';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

इस तरह अंतिम स्क्रीन आउटपुट आप अपनी आवश्यकताओं के अनुसार दूसरा बदल सकते हैं सर्कल गोल होगा

— विजेता 96 कि
स्रोत

निर्भरताएं जोड़ें => डायनामिक_टैम: ^ 1.0.1

— चैम्प 96k

स्प्लैशस्क्रीन के लिए कोई आयात नहीं है

— टस

हां बिल्कुल सही, ऐसा करने के कई तरीके हैं, लेकिन जवाब में, मैं आपको बताऊंगा कि आप इस पैकेज पब

— Champ 96k

4

यह स्पंदन में गतिशील स्प्लैश स्क्रीन को जोड़ने के लिए त्रुटि मुक्त और सबसे अच्छा तरीका है।

MAIN.DART

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

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));

SPLASHSCREEN.DART

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';


class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

@override
dispose() {
  animationController.dispose();  
  super.dispose();
}

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    animation =
        new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 30.0),
                child: new Image.asset(
                  'assets/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

CONSTANTS.DART

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

HOMESCREEN.DART

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}

— रमण रमण
स्रोत

3

जलधि भट्ट का कोड मेरे लिए काम नहीं करता है।

स्पंदन एक ' नेविगेटर ऑपरेशन को एक संदर्भ के साथ अनुरोध करता है जो एक नेविगेटर को शामिल नहीं करता है ।'

मैंने एक अन्य घटक के अंदर नेविगेटर उपभोक्ता घटक को लपेटने वाला कोड निर्धारित किया है जो इस आलेख में वर्णित मार्गों का उपयोग करते हुए नेविगेटर संदर्भ को इनिशियलाइज़ करता है ।

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

  @override
  void initState() {
    super.initState();

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}

— gibi
स्रोत

2

क्या आप कुछ स्पष्टीकरण भी जोड़ सकते हैं? एक सादा कोड ब्लॉक अकेले यह सब जानकारीपूर्ण नहीं है

— निश्चित रूप से

3

यदि आप द्वितीयक छप स्क्रीन चाहते हैं (मूल निवासी के बाद), तो यहां एक सरल उदाहरण है जो काम करता है:

class SplashPage extends StatelessWidget {
  SplashPage(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // Navigate here to next screen
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Splash screen here');
  }
}

— david72
स्रोत

3

स्पंदन आपको डिफ़ॉल्ट रूप से स्प्लैश स्क्रीन रखने की क्षमता प्रदान करता है लेकिन बहुत सारे प्लगइन्स हैं जो काम कर सकते हैं। यदि आप कार्य के लिए एक प्लगइन का उपयोग नहीं करना चाहते हैं और आप चिंतित हैं कि एक नया प्लगइन जोड़ने से आपके ऐप का आकार प्रभावित हो सकता है। तब आप इसे इस तरह से कर सकते हैं।

एंड्रॉयड के लिए

लॉन्च_बैकग्राउंड। Xml खोलें फिर आप स्प्लैश स्क्रीन की छवि, या ढाल रंग जिसे आप चाहते हैं, में डाल सकते हैं। आपके उपयोगकर्ता द्वारा आपके ऐप को खोलने पर यह पहली चीज़ है।

IOS के लिए

Xcode का उपयोग करके अपना ऐप खोलें, Runner> Assest.xcassets> LaunchImage पर क्लिक करें, आप यहां चित्र जोड़ सकते हैं। यदि आप संपादित करना चाहते हैं कि किस स्थिति में लॉन्च की गई स्क्रीन की छवि को लेना चाहिए या जैसा आप इसे लॉन्च कर सकते हैं, वैसे ही इसे LaunchScreen.storyboard पर संपादित कर सकते हैं।

— हाबिल तिलहुन
स्रोत

3

यहां आपके फ़्लटर ऐप के लिए IOS और Android प्लेटफ़ॉर्म दोनों में स्प्लैश स्क्रीन को कॉन्फ़िगर करने के चरण दिए गए हैं।

आईओएस प्लेटफॉर्म

ऐप्पल ऐप स्टोर में जमा किए गए सभी ऐप को ऐप की लॉन्च स्क्रीन प्रदान करने के लिए एक Xcode स्टोरीबोर्ड का उपयोग करना चाहिए। आइए इसे 3 चरणों में करें: -

चरण 1 : अपने ऐप डायरेक्टरी की जड़ से ios / Runner.xcworkspace खोलें।

चरण 2 : प्रोजेक्ट नेविगेटर से रनर / एसेट्स.नैसेटसेट का चयन करें और सभी आकारों (2x, 3x, आदि) के अपने लॉन्च छवियों को खींचें। आप https://appicon.co/#image-sets से विभिन्न प्रकार के चित्र भी बना सकते हैं

चरण 3 : आप देख सकते हैं LaunchScreen.storyboard फ़ाइल प्रदान की गई छवि दिखा रही है, यहाँ आप केवल छवि को खींचकर छवि की स्थिति भी बदल सकते हैं। अधिक जानकारी के लिए कृपया आधिकारिक दस्तावेज देखें https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Android प्लेटफ़ॉर्म

एंड्रॉइड में, एक लॉन्च स्क्रीन दिखाई जाती है जबकि आपका एंड्रॉइड ऐप इनिशियलाइज़ करता है। आइए इस लॉन्च स्क्रीन को 3 चरणों में सेट करें: -

चरण 1 : खोलें android / app / src / main / res / drawable / launch_background.xml फ़ाइल।

चरण 2 : लाइन नंबर 4 पर आप वांछित रंग का चयन कर सकते हैं: -

<item android:drawable="@android:color/white" />

चरण 3 : लाइन नंबर 10 पर आप छवि को बदल सकते हैं: -

android:src="@mipmap/launch_image"

यह सब, आप कर रहे हैं! हैप्पी कोडिंग :)

— गगनदीप गंभीर
स्रोत

0

Android
ऐप्स के लिए -> src -> main -> res -> drawble-> launch_background.xml

<item>
  <bitmap
      android:gravity="center"
      android:src="@mipmap/launch_image" /></item>

क्या कोडिंग के बाद किसी भी त्रुटि का सामना करना पड़ रहा है जैसे
कि एंड्रॉइड स्टूडियो में सिस्टम के साथ सिंक का उपयोग करें या कैश को रीसेट करें और मेरी समस्या को हल करें। स्पंदन डिबग मोड में स्प्लैश स्क्रीन के लिए कुछ समय लें। इसे बनाने के बाद इसे मूल एंड्रॉइड की तरह कम कर दिया जाएगा।

— लावा
स्रोत

0

Flutter.dev पहले से ही इसके लिए सबसे अच्छा उत्तर देता है, यह बग नहीं है और न ही कोई समस्या है, बस कॉन्फ़िगर करें। बस पढ़ने का समय निकालें और सब कुछ हल हो जाएगा। आप सबका दिन शुभ रहे।

https://flutter.dev/docs/development/ui/advanced/splash-screen

— फेब्रीसियो जस्टो
स्रोत

यह अब प्रासंगिक नहीं लगता, क्योंकि 9 अप्रैल को पहले ही जवाब दिया गया था।

— कीमीनो

लेकिन मेरा सबसे अच्छा फ़ॉन्ट के बिंदु पर अधिक सीधा है।

— फेब्रीसियो जस्टो

0

आप इसे दो तरीके से बना सकते हैं

मूल पैकेज और एक प्रारंभिक पृष्ठ पर जाएं। मूल निवासी Android पैकेज की तरह एक drawable बनाते हैं
कुछ समय के लिए प्रदर्शित करने के लिए डार्ट स्क्रीन बनाएं

मुझे यहां सफ़ेद स्क्रीन हटाने और स्प्लैश स्क्रीन प्रदर्शित करने के लिए एक पूरी व्याख्या मिली

— सुनील
स्रोत

-1

SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );

— एमजे
स्रोत

स्प्लैश स्क्रीन को फ़्लटर ऐप्स में जोड़ना

स्थापना गाइड (पैकेज के लेखक द्वारा):

1. स्प्लैश स्क्रीन सेट करना

2. पैकेज चलाएँ