{"id":129,"date":"2024-07-05T11:12:48","date_gmt":"2024-07-05T11:12:48","guid":{"rendered":"https:\/\/flutterfever.com\/news\/?p=129"},"modified":"2024-07-05T11:12:49","modified_gmt":"2024-07-05T11:12:49","slug":"simple-splash-screen-in-flutter","status":"publish","type":"post","link":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/","title":{"rendered":"Simple Splash Screen in Flutter"},"content":{"rendered":"\n<p>Hi,<br>This tutorial is for the developing of simple splash screen with timer.&nbsp;<br>This tutorial has three files.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>main.dart<\/li>\n\n\n\n<li>splash.dart<\/li>\n\n\n\n<li>home.dart<\/li>\n<\/ul>\n\n\n\n<p>main.dart<\/p>\n\n\n\n<p>import &#8216;package:flutter\/material.dart&#8217;;<br>import &#8216;package:home\/splash.dart&#8217;;<br><br>void main() {<br>&nbsp; runApp(MaterialApp(<br>&nbsp; &nbsp; theme: ThemeData.dark(),<br>&nbsp; &nbsp; debugShowCheckedModeBanner: false,<br>&nbsp; &nbsp; home: SplashScreen(),<br>&nbsp; ));<br>}<\/p>\n\n\n\n<p>splash.dart<\/p>\n\n\n\n<p>import &#8216;dart:async&#8217;;<\/p>\n\n\n\n<p>import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n\n\n\n<p>import &#8216;package:home\/home.dart&#8217;;<\/p>\n\n\n\n<p>class SplashScreen extends StatefulWidget {<\/p>\n\n\n\n<p>&nbsp; @override<\/p>\n\n\n\n<p>&nbsp; _SplashScreenState createState() =&gt; _SplashScreenState();<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>class _SplashScreenState extends State&lt;SplashScreen&gt; {<\/p>\n\n\n\n<p>&nbsp; startSplash() async {<\/p>\n\n\n\n<p>&nbsp; &nbsp; var dur = Duration(seconds: 2);<\/p>\n\n\n\n<p>&nbsp; &nbsp; return new Timer(dur, navigateHome);<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>&nbsp; navigateHome() {<\/p>\n\n\n\n<p>&nbsp; &nbsp; Navigator.of(context)<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; .pushReplacement(MaterialPageRoute(builder: (context) =&gt; HomeScreen()));<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>&nbsp; @override<\/p>\n\n\n\n<p>&nbsp; void initState() {<\/p>\n\n\n\n<p>&nbsp; &nbsp; \/\/ TODO: implement initState<\/p>\n\n\n\n<p>&nbsp; &nbsp; super.initState();<\/p>\n\n\n\n<p>&nbsp; &nbsp; startSplash();<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>&nbsp; @override<\/p>\n\n\n\n<p>&nbsp; Widget build(BuildContext context) {<\/p>\n\n\n\n<p>&nbsp; &nbsp; return SafeArea(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; child: Scaffold(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: Container(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; color: Colors.red,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; child: Center(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: Text(&#8216;Splash Screen&#8217;),<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; ),<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; )),<\/p>\n\n\n\n<p>&nbsp; &nbsp; );<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>home.dart<\/p>\n\n\n\n<p>import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n\n\n\n<p>class HomeScreen extends StatefulWidget {<\/p>\n\n\n\n<p>&nbsp; @override<\/p>\n\n\n\n<p>&nbsp; _HomeScreenState createState() =&gt; _HomeScreenState();<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>class _HomeScreenState extends State&lt;HomeScreen&gt; {<\/p>\n\n\n\n<p>&nbsp; @override<\/p>\n\n\n\n<p>&nbsp; Widget build(BuildContext context) {<\/p>\n\n\n\n<p>&nbsp; &nbsp; return SafeArea(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; child: Scaffold(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; body: Container(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; color: Colors.deepOrange,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; child: Center(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: Text(<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#8216;Home Page&#8217;,<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style: TextStyle(fontSize: 22),<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ),<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; &nbsp; ),<\/p>\n\n\n\n<p>&nbsp; &nbsp; &nbsp; ),<\/p>\n\n\n\n<p>&nbsp; &nbsp; ));<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>OUTPUT:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><a href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjyb6Skjc6QDbjzJg_ChrIxMJH7Bv1HRScHnhNkW9maOFWVDJNVzk-g8QUJQmLOv_NSWjn_nK37YA4c-Y08Po0TPT3BmvDxLpJvzbJ2GzasukzAwa9SNH_ZeNHaVLDOAUCdkh-RXw42lkRJ\/s1600\/Screenshot_1582289748.png\"><\/a><\/td><\/tr><tr><td>splash.dart<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><a href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEg0GynGr4Hgxkv5HepqfFJqPiXwbZBAq85Vbdk4cwZGxP5eC1dPICfx_MaewYIDmdsltfpZ1X0-fKTvEWLm7V7oTlMOMzQ1TU38xykpVt5NZcboMi9nXTRHyq0KpZ0qzGMwZylGOdvGcSJx\/s1600\/Screenshot_1582289739.png\"><\/a><\/td><\/tr><tr><td>home.dart<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Hi,This tutorial is for the developing of simple splash screen with timer.&nbsp;This tutorial has three files. main.dart import &#8216;package:flutter\/material.dart&#8217;;import &#8216;package:home\/splash.dart&#8217;; void main() {&nbsp; runApp(MaterialApp(&nbsp; &nbsp; theme: ThemeData.dark(),&nbsp; &nbsp; debugShowCheckedModeBanner: false,&nbsp; &nbsp; home: SplashScreen(),&nbsp; ));} splash.dart import &#8216;dart:async&#8217;; import &#8216;package:flutter\/material.dart&#8217;; import &#8216;package:home\/home.dart&#8217;; class SplashScreen extends StatefulWidget { &nbsp; @override &nbsp; _SplashScreenState createState() =&gt; _SplashScreenState(); } class &#8230; <a title=\"Simple Splash Screen in Flutter\" class=\"read-more\" href=\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/\" aria-label=\"Read more about Simple Splash Screen in Flutter\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-129","post","type-post","status-publish","format-standard","hentry","category-blog"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Simple Splash Screen in Flutter<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Splash Screen in Flutter\" \/>\n<meta property=\"og:description\" content=\"Hi,This tutorial is for the developing of simple splash screen with timer.&nbsp;This tutorial has three files. main.dart import &#8216;package:flutter\/material.dart&#8217;;import &#8216;package:home\/splash.dart&#8217;; void main() {&nbsp; runApp(MaterialApp(&nbsp; &nbsp; theme: ThemeData.dark(),&nbsp; &nbsp; debugShowCheckedModeBanner: false,&nbsp; &nbsp; home: SplashScreen(),&nbsp; ));} splash.dart import &#8216;dart:async&#8217;; import &#8216;package:flutter\/material.dart&#8217;; import &#8216;package:home\/home.dart&#8217;; class SplashScreen extends StatefulWidget { &nbsp; @override &nbsp; _SplashScreenState createState() =&gt; _SplashScreenState(); } class ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Flutter News and Job Updates\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T11:12:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-05T11:12:49+00:00\" \/>\n<meta name=\"author\" content=\"Dileep Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dileep Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/\",\"url\":\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/\",\"name\":\"Simple Splash Screen in Flutter\",\"isPartOf\":{\"@id\":\"https:\/\/flutterfever.com\/news\/#website\"},\"datePublished\":\"2024-07-05T11:12:48+00:00\",\"dateModified\":\"2024-07-05T11:12:49+00:00\",\"author\":{\"@id\":\"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d\"},\"breadcrumb\":{\"@id\":\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/flutterfever.com\/news\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple Splash Screen in Flutter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flutterfever.com\/news\/#website\",\"url\":\"https:\/\/flutterfever.com\/news\/\",\"name\":\"Flutter News and Job Updates\",\"description\":\"Flutter News, Hiring, Job, Recruitment, Freelancing and more\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flutterfever.com\/news\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d\",\"name\":\"Dileep Gupta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flutterfever.com\/news\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g\",\"caption\":\"Dileep Gupta\"},\"sameAs\":[\"https:\/\/flutterfever.com\/news\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Splash Screen in Flutter","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/","og_locale":"en_US","og_type":"article","og_title":"Simple Splash Screen in Flutter","og_description":"Hi,This tutorial is for the developing of simple splash screen with timer.&nbsp;This tutorial has three files. main.dart import &#8216;package:flutter\/material.dart&#8217;;import &#8216;package:home\/splash.dart&#8217;; void main() {&nbsp; runApp(MaterialApp(&nbsp; &nbsp; theme: ThemeData.dark(),&nbsp; &nbsp; debugShowCheckedModeBanner: false,&nbsp; &nbsp; home: SplashScreen(),&nbsp; ));} splash.dart import &#8216;dart:async&#8217;; import &#8216;package:flutter\/material.dart&#8217;; import &#8216;package:home\/home.dart&#8217;; class SplashScreen extends StatefulWidget { &nbsp; @override &nbsp; _SplashScreenState createState() =&gt; _SplashScreenState(); } class ... Read more","og_url":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/","og_site_name":"Flutter News and Job Updates","article_published_time":"2024-07-05T11:12:48+00:00","article_modified_time":"2024-07-05T11:12:49+00:00","author":"Dileep Gupta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dileep Gupta","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/","url":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/","name":"Simple Splash Screen in Flutter","isPartOf":{"@id":"https:\/\/flutterfever.com\/news\/#website"},"datePublished":"2024-07-05T11:12:48+00:00","dateModified":"2024-07-05T11:12:49+00:00","author":{"@id":"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d"},"breadcrumb":{"@id":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/flutterfever.com\/news\/simple-splash-screen-in-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flutterfever.com\/news\/"},{"@type":"ListItem","position":2,"name":"Simple Splash Screen in Flutter"}]},{"@type":"WebSite","@id":"https:\/\/flutterfever.com\/news\/#website","url":"https:\/\/flutterfever.com\/news\/","name":"Flutter News and Job Updates","description":"Flutter News, Hiring, Job, Recruitment, Freelancing and more","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flutterfever.com\/news\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d","name":"Dileep Gupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flutterfever.com\/news\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g","caption":"Dileep Gupta"},"sameAs":["https:\/\/flutterfever.com\/news"]}]}},"_links":{"self":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":1,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts\/129\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}