{"id":22560,"date":"2024-03-15T23:47:53","date_gmt":"2024-03-15T23:47:53","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/"},"modified":"2024-03-21T23:10:36","modified_gmt":"2024-03-21T23:10:36","slug":"how-to-achieve-card-switching-effect-in-flutter","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/","title":{"rendered":"How to achieve card switching effect in Flutter?"},"content":{"rendered":"<p>In Flutter, you can achieve a card switching effect by using the PageView component. Here is a simple example code:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">void<\/span> main() {\r\n  runApp(MyApp());\r\n}\r\n\r\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\r\n  <span class=\"hljs-meta\">@override<\/span>\r\n  Widget build(BuildContext context) {\r\n    <span class=\"hljs-keyword\">return<\/span> MaterialApp(\r\n      home: CardSwitcher(),\r\n    );\r\n  }\r\n}\r\n\r\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CardSwitcher<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatefulWidget<\/span> <\/span>{\r\n  <span class=\"hljs-meta\">@override<\/span>\r\n  _CardSwitcherState createState() =&gt; _CardSwitcherState();\r\n}\r\n\r\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">_CardSwitcherState<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">State<\/span>&lt;<span class=\"hljs-title\">CardSwitcher<\/span>&gt; <\/span>{\r\n  PageController _pageController;\r\n  <span class=\"hljs-built_in\">int<\/span> _currentIndex = <span class=\"hljs-number\">0<\/span>;\r\n\r\n  <span class=\"hljs-meta\">@override<\/span>\r\n  <span class=\"hljs-keyword\">void<\/span> initState() {\r\n    _pageController = PageController(initialPage: _currentIndex);\r\n    <span class=\"hljs-keyword\">super<\/span>.initState();\r\n  }\r\n\r\n  <span class=\"hljs-meta\">@override<\/span>\r\n  <span class=\"hljs-keyword\">void<\/span> dispose() {\r\n    _pageController.dispose();\r\n    <span class=\"hljs-keyword\">super<\/span>.dispose();\r\n  }\r\n\r\n  <span class=\"hljs-meta\">@override<\/span>\r\n  Widget build(BuildContext context) {\r\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\r\n      appBar: AppBar(\r\n        title: Text(<span class=\"hljs-string\">'Card Switcher'<\/span>),\r\n      ),\r\n      body: PageView(\r\n        controller: _pageController,\r\n        onPageChanged: (<span class=\"hljs-built_in\">int<\/span> index) {\r\n          setState(() {\r\n            _currentIndex = index;\r\n          });\r\n        },\r\n        children: [\r\n          Card(\r\n            color: Colors.red,\r\n            child: Center(\r\n              child: Text(<span class=\"hljs-string\">'Card 1'<\/span>,\r\n                  style: TextStyle(fontSize: <span class=\"hljs-number\">24<\/span>, color: Colors.white)),\r\n            ),\r\n          ),\r\n          Card(\r\n            color: Colors.blue,\r\n            child: Center(\r\n              child: Text(<span class=\"hljs-string\">'Card 2'<\/span>,\r\n                  style: TextStyle(fontSize: <span class=\"hljs-number\">24<\/span>, color: Colors.white)),\r\n            ),\r\n          ),\r\n          Card(\r\n            color: Colors.green,\r\n            child: Center(\r\n              child: Text(<span class=\"hljs-string\">'Card 3'<\/span>,\r\n                  style: TextStyle(fontSize: <span class=\"hljs-number\">24<\/span>, color: Colors.white)),\r\n            ),\r\n          ),\r\n        ],\r\n      ),\r\n      bottomNavigationBar: BottomNavigationBar(\r\n        currentIndex: _currentIndex,\r\n        onTap: (<span class=\"hljs-built_in\">int<\/span> index) {\r\n          setState(() {\r\n            _currentIndex = index;\r\n            _pageController.animateToPage(\r\n              _currentIndex,\r\n              duration: <span class=\"hljs-built_in\">Duration<\/span>(milliseconds: <span class=\"hljs-number\">500<\/span>),\r\n              curve: Curves.ease,\r\n            );\r\n          });\r\n        },\r\n        items: [\r\n          BottomNavigationBarItem(\r\n            icon: Icon(Icons.home),\r\n            label: <span class=\"hljs-string\">'Card 1'<\/span>,\r\n          ),\r\n          BottomNavigationBarItem(\r\n            icon: Icon(Icons.business),\r\n            label: <span class=\"hljs-string\">'Card 2'<\/span>,\r\n          ),\r\n          BottomNavigationBarItem(\r\n            icon: Icon(Icons.school),\r\n            label: <span class=\"hljs-string\">'Card 3'<\/span>,\r\n          ),\r\n        ],\r\n      ),\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>In the example code above, we use the PageView component to display cards and control their switching through the PageController. By setting the onPageChanged callback function, we can update the current selected item in the bottom navigation bar when switching cards. By clicking on the options in the bottom navigation bar, we can trigger an animation to switch to the corresponding card.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Flutter, you can achieve a card switching effect by using the PageView component. Here is a simple example code: import &#8216;package:flutter\/material.dart&#8217;; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: CardSwitcher(), ); } } class CardSwitcher extends StatefulWidget { @override _CardSwitcherState createState() =&gt; _CardSwitcherState(); } [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22560","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to achieve card switching effect in Flutter? - Blog - Silicon Cloud<\/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:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to achieve card switching effect in Flutter?\" \/>\n<meta property=\"og:description\" content=\"In Flutter, you can achieve a card switching effect by using the PageView component. Here is a simple example code: import &#039;package:flutter\/material.dart&#039;; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: CardSwitcher(), ); } } class CardSwitcher extends StatefulWidget { @override _CardSwitcherState createState() =&gt; _CardSwitcherState(); } [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T23:47:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T23:10:36+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\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\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"How to achieve card switching effect in Flutter?\",\"datePublished\":\"2024-03-15T23:47:53+00:00\",\"dateModified\":\"2024-03-21T23:10:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\"},\"wordCount\":90,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\",\"name\":\"How to achieve card switching effect in Flutter? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T23:47:53+00:00\",\"dateModified\":\"2024-03-21T23:10:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to achieve card switching effect in Flutter?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to achieve card switching effect in Flutter? - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/","og_locale":"en_US","og_type":"article","og_title":"How to achieve card switching effect in Flutter?","og_description":"In Flutter, you can achieve a card switching effect by using the PageView component. Here is a simple example code: import 'package:flutter\/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: CardSwitcher(), ); } } class CardSwitcher extends StatefulWidget { @override _CardSwitcherState createState() =&gt; _CardSwitcherState(); } [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T23:47:53+00:00","article_modified_time":"2024-03-21T23:10:36+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"How to achieve card switching effect in Flutter?","datePublished":"2024-03-15T23:47:53+00:00","dateModified":"2024-03-21T23:10:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/"},"wordCount":90,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/","name":"How to achieve card switching effect in Flutter? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T23:47:53+00:00","dateModified":"2024-03-21T23:10:36+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-achieve-card-switching-effect-in-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to achieve card switching effect in Flutter?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=22560"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22560\/revisions"}],"predecessor-version":[{"id":56489,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22560\/revisions\/56489"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=22560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=22560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=22560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}