<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ankur Gupta</title>
    <description>The latest articles on DEV Community by Ankur Gupta (@ankurg132).</description>
    <link>https://dev.to/ankurg132</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F434088%2F7186eede-efd1-4894-b5f7-9ee75f8499f9.jpeg</url>
      <title>DEV Community: Ankur Gupta</title>
      <link>https://dev.to/ankurg132</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ankurg132"/>
    <language>en</language>
    <item>
      <title>The Android 17 Reality Check: Why Your Flutter App Can No Longer Hide Behind Orientation Locks</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Tue, 02 Jun 2026 07:29:46 +0000</pubDate>
      <link>https://dev.to/ankurg132/the-android-17-reality-check-why-your-flutter-app-can-no-longer-hide-behind-orientation-locks-1b87</link>
      <guid>https://dev.to/ankurg132/the-android-17-reality-check-why-your-flutter-app-can-no-longer-hide-behind-orientation-locks-1b87</guid>
      <description>&lt;p&gt;The era of the “mobile-only” safety net is officially over.&lt;/p&gt;

&lt;p&gt;With the recent release of Android 17 (API level 37) at Google I/O ’26, Google has finalized a major architectural shift: the complete removal of the developer opt-out for orientation, aspect ratio, and resizability restrictions on large screens.&lt;/p&gt;

&lt;p&gt;For years, many mobile developers relied on quick manifest fixes or code constraints to bypass the challenges of larger screens:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;WidgetsFlutterBinding&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;ensureInitialized&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="c1"&gt;// Delete or comment out lines like this:&lt;/span&gt;
  &lt;span class="n"&gt;SystemChrome&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;setPreferredOrientations&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
    &lt;span class="n"&gt;DeviceOrientation&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;portraitUp&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;]);&lt;/span&gt;
  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;MyApp&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If your application targets Android 17, the operating system will completely ignore these parameters when running on tablets, foldables (inner screens), desktop windowing modes, or Chromebooks. If your app isn’t built to scale dynamically, this change won’t just result in an unpolished look — it will actively break user experience with stretched layouts, clipped interactive elements, and broken view states.&lt;/p&gt;

&lt;p&gt;Given that multi-device users spend an average of 9x more than phone-only users (reaching up to 14x on foldables), delivering a high-quality large-screen experience is a significant commercial opportunity.&lt;/p&gt;

&lt;p&gt;The Shift from “Device-Based” to “Window-Based” Layouts&lt;br&gt;
To adapt to the Android 17 landscape, Flutter developers must stop thinking about the physical hardware (e.g., Is this a phone or a tablet?) and start focusing entirely on the available window constraints.&lt;/p&gt;

&lt;p&gt;Instead of checking device platforms or locking orientations (using Platform.isAndroid etc), your UI architecture should dynamically scale across standard Material 3 window size classes:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Compact (&amp;lt; 600 dp)&lt;/strong&gt;: Optimized for single-pane viewing and bottom navigation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Medium (600–839 dp)&lt;/strong&gt;: Transitioning to split panes and navigation rails.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Expanded &amp;amp; Large (&amp;gt;840 dp)&lt;/strong&gt;: Utilizing multi-column interfaces and persistent navigation drawers.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Meet the Flutter Adaptability Solution&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To simplify this transition for development teams, I have created an open-source, AI-powered system instruction asset: &lt;a href="https://github.com/ankurg132/flutter-skills/blob/main/skills/flutter-adaptibility-skill/SKILL.md" rel="noopener noreferrer"&gt;the Flutter Adaptability Skill&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This tool serves as an automated code auditor and targeted modifier. Instead of recommending generic third-party packages or demanding complete codebase rewrites, it hooks directly into your unique Flutter project structure to identify and fix layout gaps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Core Auditing Functions:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Layout Constraints&lt;/strong&gt;: Replaces fragile Platform.isAndroid/isIOS layout rules with robust LayoutBuilder and MediaQuery.sizeOf(context) implementations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Navigation Overhauls&lt;/strong&gt;: Automatically configures responsive shifts between NavigationBar and NavigationRail systems based on active width.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Desktop &amp;amp; Large Screen Input&lt;/strong&gt;: Integrates proper mouse hover feedback, trackpad drag support in MaterialScrollBehavior, and custom context menus.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Foldable &amp;amp; Hinge Recognition&lt;/strong&gt;: Detects non-standard physical configurations via MediaQuery.displayFeaturesOf(context) to prevent rendering over hinge gaps.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Preparing for the Future&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Android 17 establishes an adaptive baseline that will become mandatory for Google Play updates by August 2027. Transitioning your layout logic from rigid device definitions to responsive windows ensures your applications remain resilient on foldables, tablets, and next-generation desktop environments.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>flutter</category>
      <category>dart</category>
    </item>
    <item>
      <title>Separating dev and production environment in your Flutter App with multiple Firebase configurations.</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Wed, 13 May 2026 06:49:06 +0000</pubDate>
      <link>https://dev.to/ankurg132/separating-dev-and-production-environment-in-your-flutter-app-with-multiple-firebase-configurations-5h5n</link>
      <guid>https://dev.to/ankurg132/separating-dev-and-production-environment-in-your-flutter-app-with-multiple-firebase-configurations-5h5n</guid>
      <description>&lt;p&gt;Mixing dev and production environment is one of the most common mistakes in Flutter development, and the consequences compound quickly. Test sign-ups and data pollute your production data, errors in testing sessions spike your Crashlytics error counts in production, and a single misplaced sendNotification() call during a debug run can ping thousands of real users. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The fix?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Flavors in Flutter allows you to create distinct versions of your application from a single codebase (e.g., Development, Production, Staging etc). By leveraging Flavors, you keep your test data separated in a Sandbox Firebase project while ensuring your production live database is clean and safe, and you can install both variants on your phone concurrently.&lt;/p&gt;

&lt;p&gt;Let's see how we can implement it in Flutter:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Set up 2 Firebase projects, one for development, one for production.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In this case, the project for dev will have the details:&lt;br&gt;
&lt;em&gt;Name: My App (Test)&lt;br&gt;
Package name: com.example.app.dev&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;For production:&lt;br&gt;
&lt;em&gt;Name: My App&lt;br&gt;
Package name: com.example.app&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;After setting up each of the projects, you can download the config files and place them as following in your directories:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3fnj6l8k6q6ydnikwmod.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3fnj6l8k6q6ydnikwmod.png" alt=" " width="800" height="636"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Configuration required for Android and iOS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For Android, configure the flavors in app/build.gradle as following for dev and production flavors:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight gradle"&gt;&lt;code&gt;&lt;span class="n"&gt;android&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;flavorDimensions&lt;/span&gt; &lt;span class="s2"&gt;"env"&lt;/span&gt;
    &lt;span class="n"&gt;productFlavors&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="n"&gt;dev&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
            &lt;span class="n"&gt;dimension&lt;/span&gt; &lt;span class="s2"&gt;"env"&lt;/span&gt;
            &lt;span class="n"&gt;applicationIdSuffix&lt;/span&gt; &lt;span class="s2"&gt;".dev"&lt;/span&gt;
            &lt;span class="n"&gt;versionNameSuffix&lt;/span&gt; &lt;span class="s2"&gt;"-dev"&lt;/span&gt;
            &lt;span class="n"&gt;resValue&lt;/span&gt; &lt;span class="s2"&gt;"string"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"app_name"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"MyApp (Dev)"&lt;/span&gt;
        &lt;span class="o"&gt;}&lt;/span&gt;
        &lt;span class="n"&gt;production&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
            &lt;span class="n"&gt;dimension&lt;/span&gt; &lt;span class="s2"&gt;"env"&lt;/span&gt;
            &lt;span class="c1"&gt;// no suffix — this is the canonical app ID&lt;/span&gt;
            &lt;span class="n"&gt;resValue&lt;/span&gt; &lt;span class="s2"&gt;"string"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"app_name"&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"MyApp"&lt;/span&gt;
        &lt;span class="o"&gt;}&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Android automatically picks up the correct google-services.json from src/dev/ or src/production/ at build time, so no extra configuration is required.&lt;/p&gt;

&lt;p&gt;For iOS, the flavor is picked up using "Schemes". &lt;br&gt;
In order to configure them, Open Xcode, go to Product → Scheme → Manage Schemes, open the existing Runner scheme, and create a duplicate scheme and rename the copies to dev and production. You will not need the Runner scheme anymore.&lt;/p&gt;

&lt;p&gt;The manage scheme should look like&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dc3fu2yw94a2g1hj314.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dc3fu2yw94a2g1hj314.png" alt=" " width="800" height="300"&gt;&lt;/a&gt;.&lt;br&gt;
For further configuration, go to Xcode -&amp;gt; Runner -&amp;gt; Build phases. Click on the add icon to create a new Run script.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwuu9q43l1uqismtme5kt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwuu9q43l1uqismtme5kt.png" alt=" " width="800" height="481"&gt;&lt;/a&gt;&lt;br&gt;
The new run script will help determine which Firebase configuration to use. Add this code to the script:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;FLAVOR&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;FLUTTER_FLAVOR&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;FLAVOR&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s2"&gt;"production"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
&lt;/span&gt;&lt;span class="nb"&gt;cp&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;PROJECT_DIR&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/flavors/production/GoogleService-Info.plist"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;BUILT_PRODUCTS_DIR&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;PRODUCT_NAME&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.app/GoogleService-Info.plist"&lt;/span&gt;
&lt;span class="k"&gt;else
&lt;/span&gt;&lt;span class="nb"&gt;cp&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;PROJECT_DIR&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/flavors/dev/GoogleService-Info.plist"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;BUILT_PRODUCTS_DIR&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;PRODUCT_NAME&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.app/GoogleService-Info.plist"&lt;/span&gt;
&lt;span class="k"&gt;fi&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Make sure this Run Script phase runs before the "Copy Bundle Resources" phase in Xcode. Drag it above if needed.&lt;/p&gt;

&lt;p&gt;Now we are done with the configuration required in for iOS and Android folders. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Add flavors in your Flutter code&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The next step would be configuring the Flutter app to follow flavors.&lt;br&gt;
We will create 2 main.dart files which will serve as an entry point for the respective flavors. The directory should look like:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fboblnfvewe6sk4jju8or.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fboblnfvewe6sk4jju8or.png" alt=" " width="704" height="318"&gt;&lt;/a&gt;&lt;br&gt;
The app_config file will contain the details needed for each flavor.&lt;/p&gt;

&lt;p&gt;app_config.dart&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kt"&gt;enum&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;dev&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;production&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AppConfig&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="kd"&gt;late&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt; &lt;span class="n"&gt;flavor&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="kt"&gt;bool&lt;/span&gt; &lt;span class="kd"&gt;get&lt;/span&gt; &lt;span class="n"&gt;isDev&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;flavor&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="kt"&gt;bool&lt;/span&gt; &lt;span class="kd"&gt;get&lt;/span&gt; &lt;span class="n"&gt;isProd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;flavor&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;production&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="kd"&gt;get&lt;/span&gt; &lt;span class="n"&gt;appName&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;flavor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'MyApp (Dev)'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;production&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'MyApp'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="kd"&gt;get&lt;/span&gt; &lt;span class="n"&gt;baseUrl&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;switch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;flavor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'https://test.api.com'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;production&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s"&gt;'https://api.com'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;main_dev.dart&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:firebase_core/firebase_core.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'firebase_options_dev.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'config/app_config.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'main.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;WidgetsFlutterBinding&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;ensureInitialized&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="n"&gt;AppConfig&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;flavor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;Firebase&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;initializeApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;options:&lt;/span&gt; &lt;span class="n"&gt;DefaultFirebaseOptions&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;currentPlatform&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;MyApp&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;main.dart&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:firebase_core/firebase_core.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'firebase_options_production.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'config/app_config.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'main.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;WidgetsFlutterBinding&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;ensureInitialized&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="n"&gt;AppConfig&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;flavor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Flavor&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;production&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;Firebase&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;initializeApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nl"&gt;options:&lt;/span&gt; &lt;span class="n"&gt;DefaultFirebaseOptions&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;currentPlatform&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;MyApp&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Use the FlutterFire CLI to generate separate firebase_options.dart files for each Firebase project. Run these commands from your Flutter project root.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;dart pub global activate flutterfire_cli

&lt;span class="c"&gt;# Generate options for the dev Firebase project&lt;/span&gt;
flutterfire configure &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--project&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;my-app-dev &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--out&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;lib/firebase_options_dev.dart &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--platforms&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;android,ios

&lt;span class="c"&gt;# Generate options for the production Firebase project&lt;/span&gt;
flutterfire configure &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--project&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;my-app&lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--out&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;lib/firebase_options.dart &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--platforms&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;android,ios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each generated file exports a DefaultFirebaseOptions class. Since they live in different files, each main_*.dart imports only its own.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Run the app and configure flavors in VSCode&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To run the app, we can now use the Flavors and entry point as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;flutter run &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--flavor&lt;/span&gt; dev &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-t&lt;/span&gt; lib/main_dev.dart

&lt;span class="c"&gt;# Run the production flavor&lt;/span&gt;
flutter run &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--flavor&lt;/span&gt; production &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-t&lt;/span&gt; lib/main.dart
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can also configure VSCode run button to use the flavors by editing the launch.json inside .vscode folder as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"0.2.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"configurations"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"production-debug"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"request"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"launch"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"program"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"lib/main.dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--flavor"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"production"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--target"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"lib/main.dart"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dev-debug"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"request"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"launch"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"program"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"lib/main_dev.dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--flavor"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--target"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"lib/main_dev.dart"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"production-release"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"request"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"launch"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"program"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"lib/main.dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--flavor"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"production"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--target"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"lib/main.dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--release"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dev-release"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"request"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"launch"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"program"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"lib/main_dev.dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--flavor"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--target"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"lib/main_dev.dart"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="s2"&gt;"--release"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"compounds"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will give you 4 run options, which can help you build the debug and release versions for both dev and production.&lt;/p&gt;

&lt;p&gt;Now you are done with all the necessary setup required.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Use flavors inside your app logic&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Inside your application, you can write the code based on Flavors such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ApiService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;baseUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;AppConfig&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;baseUrl&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Show a banner only in dev builds&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;AppConfig&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;isDev&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>flutter</category>
      <category>dart</category>
    </item>
    <item>
      <title>Building an IDE in Flutter, for Flutter</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Tue, 23 Dec 2025 20:12:51 +0000</pubDate>
      <link>https://dev.to/ankurg132/building-an-ide-in-flutter-for-flutter-4kfj</link>
      <guid>https://dev.to/ankurg132/building-an-ide-in-flutter-for-flutter-4kfj</guid>
      <description>&lt;p&gt;I'm trying to build an IDE specifically for Flutter, this is similar to VSCode, but with some Flutter specific features. The catch? I'm using Flutter to build the IDE itself!&lt;/p&gt;

&lt;p&gt;So now, you can compile your Flutter projects, inside a Flutter app.&lt;/p&gt;

&lt;p&gt;There are 2 specific features that I've worked on till now:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A seperate folder structure for Flutter projects. This might look similar to you if you've used Android Studio.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A dedicated tab to search for pub.dev packages and directly add them to your application. I'm also displaying the web version using the webview inside the editor.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The rest features are similar to VSCode such as Multi Tab Editing, Auto Saving, Integrated Terminal, Resizable Panel and more.&lt;br&gt;
I'm still working to add the LSP Support to enable features such as showing implementations, enable Dart Code completion and more but I'm currently limited due to the flutter_monaco package limitations.&lt;/p&gt;

&lt;p&gt;I have some more thoughts on how this could be improved further and would love to hear your thoughts on this.&lt;/p&gt;

&lt;p&gt;The app is mostly vibe-coded for now. But you'll find a readme which can properly explain the functionalities and more implementations. I know this cannot be a useful tool for now, and I'm considering this as a small hobby project, but would love to hear your thoughts on this and if this could be something that could really turn useful once.&lt;/p&gt;

&lt;p&gt;Project repo: &lt;a href="https://github.com/ankurg132/flutter_ide" rel="noopener noreferrer"&gt;https://github.com/ankurg132/flutter_ide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can also find screenshots in the repo. I've only tried this in MacOS for now.&lt;br&gt;
Feel free to add new issues, features, suggestions.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>dart</category>
    </item>
    <item>
      <title>Migrating old Flutter project to the latest version.</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Thu, 01 Feb 2024 11:35:20 +0000</pubDate>
      <link>https://dev.to/ankurg132/migrating-old-flutter-project-to-the-latest-version-1d06</link>
      <guid>https://dev.to/ankurg132/migrating-old-flutter-project-to-the-latest-version-1d06</guid>
      <description>&lt;p&gt;Flutter is continuously upgrading, and if you have any years old project, it is necessary to keep your project upgraded with the latest versions.&lt;br&gt;
This comprehensive guide will be just enough for you to upgrade all your projects to the latest versions.&lt;/p&gt;

&lt;p&gt;1: Perform flutter upgrade: The first step you need is to make sure you have the latest version of Flutter installed.&lt;br&gt;
Use the command &lt;code&gt;flutter upgrade&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;2: Update your SDK versions in your pubspec.yaml file: The next important step is to upgrade your Dart SDK to the latest version. This can be done by visiting your pubspec.yaml file and changing the sdk parameter. This is how the latest SDK version looks like at the time of writing the article:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fru7g5zzid3stfjmsiguo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fru7g5zzid3stfjmsiguo.png" alt="pubspec.yaml file"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;3: Update your gradle.build inside the Android folder. This will include changing the kotlin_version specified in line 2 and the gradle version at line 9 if it is manually specified.&lt;br&gt;
Find the available latest Gradle versions at &lt;a href="https://gradle.org/releases/" rel="noopener noreferrer"&gt;https://gradle.org/releases/&lt;/a&gt;&lt;br&gt;
Kotlin versions at: &lt;a href="https://kotlinlang.org/docs/releases.html" rel="noopener noreferrer"&gt;https://kotlinlang.org/docs/releases.html&lt;/a&gt;&lt;br&gt;
This is how it looks like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4vmqqrpgquslqf49f2xv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4vmqqrpgquslqf49f2xv.png" alt="gradle.build in android folder"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;4: Upgrade the gradle version in gradle-wrapper.properties inside the android folder.&lt;br&gt;
This will only include changing the distribution_url on line 6.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw112qbz7e846i3u1c8o4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw112qbz7e846i3u1c8o4.png" alt="gradle-wrapper.properties"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;5: pub upgrade: You all all set. Just upgrade your dependencies to the latest versions by using:&lt;br&gt;
&lt;code&gt;flutter pub upgrade --major-versions&lt;/code&gt;&lt;br&gt;
and run the application. Note that according to the dependencies used, you may need to upgrade your code in some cases with the latest changes.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>android</category>
      <category>ios</category>
    </item>
    <item>
      <title>2023: Year In Review</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Thu, 18 Jan 2024 06:30:00 +0000</pubDate>
      <link>https://dev.to/ankurg132/2023-year-in-review-2jeo</link>
      <guid>https://dev.to/ankurg132/2023-year-in-review-2jeo</guid>
      <description>&lt;p&gt;A bit late in the new year already to talk about the past one, but I suppose it's important to keep track of the year and this is what this yearly post update is all about. &lt;br&gt;
Not going to keep this list in a particular order, but adding pointers to make things easier out here! &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The year 2023 started with a trip to IIT Bombay, the dream campus of every JEE aspirant in India. I stayed at the campus hostel for around 3-4 days, attending the Entrepreneur Summit '23. Exploring the campus for days and nights and wandering around it was a beautiful start to the year. Also got the chance to watch my favorite comedians Akash Gupta and Biswa Kalyan Rath perform live during the event.&lt;/li&gt;
&lt;li&gt;Attended my first In-person hackathon this year: Hack This Fall. HTF was the best in-person hackathon I've ever attended to this day. During those 36 hours filled with caffeine and code, I hardly slept for some 3-4 hours and loved the experience. We also won one of the track prizes and I also got the chance to represent the GitHub booth being a GitHub campus expert.&lt;/li&gt;
&lt;li&gt;Not too long after HTF, I attended another in-person hackathon in Bhopal this time, organized by E-Cell NIT Bhopal. Also got the chance to witness Ashneer Grover performing live at the event!&lt;/li&gt;
&lt;li&gt;One of my biggest community achievements this year was being able to host central India's biggest UX Meetup in Bhopal! Found some great speakers, and sponsors. Would surely classify this as one of the best events I could be a part of.&lt;/li&gt;
&lt;li&gt;Apart from the UX Meetup, I got the chance to host a plethora of other in-person events this year, including Bhopal FOSS, DevFest Bhopal, Solana Developers Tour Bhopal, and more. Also got to join WittyHacks hackathon as an organizer and represented GitHub!&lt;/li&gt;
&lt;li&gt;Started the first web3 community in Bhopal, known as Bhopal DAO. Since the onset of the first event known as Web3 Connect Bhopal, we've added so much more to the community, including the Push tour in Bhopal and more IRL and online events.&lt;/li&gt;
&lt;li&gt;Made some in-person talks this year by joining as a speaker at DurgFOSS, ChatGPT Chronicles at LNCT Bhopal, and more. Had my first flight while traveling for DurgFOSS!&lt;/li&gt;
&lt;li&gt;Graduated as a Google Developer Student Club Lead this year! Had an amazing graduation party in Bangalore with all the GDSC Leads and bid farewell to the program!&lt;/li&gt;
&lt;li&gt;Not too long after graduation from GDSC, started the Tensorflow User Group in Bhopal, looking forward to hosting its first in-person event in 2024!&lt;/li&gt;
&lt;li&gt;Became a Microsoft Windows Insider MVP, got some amazing goodies, and interacted with the community!&lt;/li&gt;
&lt;li&gt;Attended many more Web3 Hackathons hosted online, including Eth4All, Scaling Ethereum, NFT.Nyc by 5ireChain, EthDubai x Sushiswap, Flow Hackathon and more.
Also won a bounty of around 750 USD at the NFT.Nyc Hackathon along with some other bounties at other hackathons!&lt;/li&gt;
&lt;li&gt;Attended web3conf Goa! Visited Goa for the first time!&lt;/li&gt;
&lt;li&gt;Found a Freelancing Flutter gig at an IRL event and been still working on the gig since then.&lt;/li&gt;
&lt;li&gt;Interned at Persistent System through their Martian Internship program where I got trained in Python.&lt;/li&gt;
&lt;li&gt;We started Dzyencrew, a small design agency focused on Freelancing.&lt;/li&gt;
&lt;li&gt;I completed 7 Semesters of my bachelor's in Technology, and I have some 5 months left before graduation now!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;2023 has been a year filled with exploring new technologies such as Blockchain and Generative AI while making roots deeper into the known tech such as Flutter and Android Development.&lt;br&gt;
From a community leader's perspective, 2023 has been the best - the maximum amount of events have been hosted this year and I pretty much hope this trend can only go higher in the upcoming years!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Creating Beautiful UI with Flutter</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Fri, 05 Jan 2024 18:47:43 +0000</pubDate>
      <link>https://dev.to/ankurg132/creating-beautiful-ui-with-flutter-2ob6</link>
      <guid>https://dev.to/ankurg132/creating-beautiful-ui-with-flutter-2ob6</guid>
      <description>&lt;p&gt;Flutter offers a variety of packages that you can specifically use for enhancing your UI, and in this blog I'm going to share some of my most used packages for creating a beautiful UI:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Loading Animation Packages&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;1: &lt;a href="https://pub.dev/packages/loading_animation_widget" rel="noopener noreferrer"&gt;loading_animation_widget&lt;/a&gt;: Loading animation widget enables users with animated loaders that one can use instead of the traditional Circular Progress Bar.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn82ztwushwmv88gzv11b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn82ztwushwmv88gzv11b.png" alt="loading animation widget"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2: &lt;a href="https://pub.dev/packages/shimmer" rel="noopener noreferrer"&gt;shimmer&lt;/a&gt;: For Android Users particularly , shimmer is one of the most popular loader in use. The shimmer package provides a minimalistic way to implement shimmer effect.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb1fz701ah716ri0m8rue.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb1fz701ah716ri0m8rue.png" alt="shimmer"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;3: &lt;a href="https://pub.dev/packages/loader_overlay" rel="noopener noreferrer"&gt;loader_overlay&lt;/a&gt;: If you specifically wish to block the UI interactions while a loading is in effect, this package is just for you!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmuae2pfc0a1zs0a7kt2y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmuae2pfc0a1zs0a7kt2y.png" alt="loader overlay"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drawer Widgets&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;1: &lt;a href="https://fluttergems.dev/drawer/" rel="noopener noreferrer"&gt;Fluttergems list of Drawers&lt;/a&gt;: Contains an extensive list of drawer packages available in flutter.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;UI Widgets for body&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;1: &lt;a href="https://pub.dev/packages/get" rel="noopener noreferrer"&gt;getx&lt;/a&gt;: get is mainly used for state management, however, it also provides basic widgets such as toaster, snackbar, dialogbox, alert dialog, bottom modal sheet etc. It eases the use of these widgets by wrapping them into a single widget that can mostly be adopted by just one or two lines of code.&lt;/p&gt;

&lt;p&gt;2: &lt;a href="https://pub.dev/packages/carousel_slider" rel="noopener noreferrer"&gt;carousel_slider&lt;/a&gt;: If you wish to showcase a list of images in an animated transition, this package is just for you! Highly similar for those who've came from a web background.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz772n9xw6hw5pjk84sit.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz772n9xw6hw5pjk84sit.png" alt="carousel"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;3: &lt;a href="https://pub.dev/packages/font_awesome_flutter" rel="noopener noreferrer"&gt;Font Awesome&lt;/a&gt; and &lt;a href="https://pub.dev/packages/google_fonts" rel="noopener noreferrer"&gt;Google Fonts&lt;/a&gt;: Tired of adding each font seperately and need a similar process to use custom fonts? Font Awesome and Google Fonts package provides you with a plethora of Fonts freely available that you can directly use with your Textstyle widget!&lt;/p&gt;

&lt;p&gt;4: &lt;a href="https://pub.dev/packages/fluent_ui" rel="noopener noreferrer"&gt;fluent_ui&lt;/a&gt;: Since you can now also create Windows applications using Flutter, Fluent UI similar to Material UI and Cupertino UI for Android and iOS, provides Windows-specific UI widgets that can be used for creating Windows-lookalike UI, and it's not just limited for Windows!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5bf7wjuj77akr9mfsuck.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5bf7wjuj77akr9mfsuck.png" alt="fluent ui"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bottom Navigation Bar Packages&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;1: &lt;a href="https://pub.dev/packages/animated_bottom_navigation_bar" rel="noopener noreferrer"&gt;animated_bottom_navigation_bar&lt;/a&gt;: This is one of the best Bottom Navigation Bar I've came across, provides animated navigation with a variety of customizations available.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuw7k1n9qwifenuo1m3wh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuw7k1n9qwifenuo1m3wh.png" alt="animated bottom navbar"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2: &lt;a href="https://pub.dev/packages/persistent_bottom_nav_bar" rel="noopener noreferrer"&gt;persistent_bottom_nav_bar&lt;/a&gt;: One of the most used Bottom Navigation Bar, provides minimalistic design with easy to use and customizations.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5e46rhg0uo86ol90tud.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv5e46rhg0uo86ol90tud.png" alt="persistent navbar"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is noteworthy that while these packages are useful, the core usage of them depends on the use case, which varies depending upon the core functionality. &lt;/p&gt;

&lt;p&gt;Some other packages you should check out:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://pub.dev/packages/flutter_animate" rel="noopener noreferrer"&gt;animate&lt;/a&gt; for animation!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Find some Additional Resources below:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://fluttergems.dev/widget-library-ui-framework/" rel="noopener noreferrer"&gt;Flutter Gems Widget Library&lt;/a&gt;: The Flutter Gems website also provides an extensive list of many available flutter packages.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://medevel.com/flutter-17-ui/" rel="noopener noreferrer"&gt;Top 18 Flutter Widgets to Spice Up your app&lt;/a&gt;: This is also a very useful list of packages, haven't included them in my list as they've already been mentioned here. Do check out this guide as well!&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/iampawan/Flutter-UI-Kit" rel="noopener noreferrer"&gt;Flutter UI Kit&lt;/a&gt;: Contains pre-made templates for basic pages such as login, profile, dashboards and a lot more. 100% Open sourced and easy to use!&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>flutter</category>
      <category>android</category>
      <category>ui</category>
      <category>ios</category>
    </item>
    <item>
      <title>2021: Year In Review</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Sun, 02 Jan 2022 13:59:08 +0000</pubDate>
      <link>https://dev.to/ankurg132/2021-year-in-review-3j7b</link>
      <guid>https://dev.to/ankurg132/2021-year-in-review-3j7b</guid>
      <description>&lt;p&gt;Since I'm seeing a lot of year in Review posts for the conclusion of 2021, I felt like creating one myself too. So I obviously doesn't remember it all on a monthly basis, I'll try summing it all up point wise.&lt;/p&gt;

&lt;p&gt;So here we go (Will be a long read I guess)-&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;So I started my college in Nov 2020, so 2021 is kind of the year I basically got started full time with programming. I've had previous experiences, though this is the year I dedicated myself only to computers.&lt;/li&gt;
&lt;li&gt;I remember starting with the &lt;a href="https://github.com/ossu/computer-science" rel="noopener noreferrer"&gt;OSSU&lt;/a&gt; Curriculum, Well Currently I'm a bit behind the schedule, but I've completed some great courses, definitely worth it. Learnt about Python, BSL etc.&lt;/li&gt;
&lt;li&gt;Did some open source contributions, started with creating my own repositories, then I slowly begin to contribute in some beginner friendly repositories. Later on explored some open source programs, became a part of GSSOC, LGMSOC etc as a contributor.&lt;/li&gt;
&lt;li&gt;I mentored in various open source programs too later on, including GWOC, SWOC, ICC and DWOC.&lt;/li&gt;
&lt;li&gt;Started my own open source community, &lt;a href="https://semikolan.co/links" rel="noopener noreferrer"&gt;Semikolan&lt;/a&gt; we basically tried to create a community inclusive to all where folks can talk about anything related to computers and technology. We also promoted hackathons, open source development and such stuffs.&lt;/li&gt;
&lt;li&gt;Got selected as a Microsoft Learn Student Ambassador, this is one of the most defining and important event of the year, being an MLSA enabled me to open doors for Semikolan, motivated me to organize my own events and connected me with like minded fellows. &lt;/li&gt;
&lt;li&gt;Later on I also became the part of our college's Google Student Developer Club under the ML/Cloud Team and currently also managing a lot under the same. I also got selected as an Android Study Jam Facilitator for the year.&lt;/li&gt;
&lt;li&gt;I hosted a lot of events under these communities. Including workshops on Git, Github and open source &lt;a href="https://www.youtube.com/watch?v=mkux1BWfEO8" rel="noopener noreferrer"&gt;1&lt;/a&gt;, &lt;a href="https://www.youtube.com/watch?v=6cLjYn33m8k" rel="noopener noreferrer"&gt;2&lt;/a&gt; and more. I also hosted the Android Study Jam events and 10 Days of Open source event under GDSC.&lt;/li&gt;
&lt;li&gt;Also volunteered at a lot of other communities, including Mozilla Bhopal, CNCF Bhopal, Hackclub UIT RGPV and some other Campus programs of Skillenza, Angelhack, Binance etc. I also became a part of some Hackathons, such as Hack This Fall as an evangelist.&lt;/li&gt;
&lt;li&gt;Began to participate in Hackathons, our college's E-cell organized a hackathon at around the start of the year and that was when I got the team of my life, we won the second prize (INR 20k) by creating &lt;a href="https://github.com/semikolan-co/hostocare" rel="noopener noreferrer"&gt;Hostocare&lt;/a&gt;, I also learnt flutter for the Application development and this team later on created Semikolan.&lt;/li&gt;
&lt;li&gt;I also participated in a lot of other hackathons, most of them were Major League Hackathons, received some swags in that too.&lt;/li&gt;
&lt;li&gt;Explored a lot of domains such as App Development (Flutter and Kotlin), Machine Learning (pytorch), DevOps (Got AZ-900 certified too), Blockchain (Solidity) and Game Development (Unity). Currently I'm mainly focused towards Flutter and Kotlin Development.&lt;/li&gt;
&lt;li&gt;Got a flutter internship at Verstile, created some applications for 2 month duration which are also live on Play Store currently. &lt;a href="https://play.google.com/store/apps/details?id=com.argent.job" rel="noopener noreferrer"&gt;1&lt;/a&gt;, &lt;a href="https://play.google.com/store/apps/developer?id=Team+semicolon" rel="noopener noreferrer"&gt;2&lt;/a&gt; and more.&lt;/li&gt;
&lt;li&gt;Also currently working as an Android Developer (kotlin) Intern at &lt;a href="https://scogo.in" rel="noopener noreferrer"&gt;Scogo&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Wrote some blogs on variety of topics at &lt;a href="https://blog.semikolan.co" rel="noopener noreferrer"&gt;Semikolan blog&lt;/a&gt;, &lt;a href="https://dev.to/ankurg132"&gt;Dev.to&lt;/a&gt;. Also created some Youtube Videos on Open source, Flutter, General Programming etc at &lt;a href="https://youtube.com/c/Semikolan" rel="noopener noreferrer"&gt;Semikolan YT Channel&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;I'm also a co-head at Asper, our college society. Worked on App Department throughout the year and now also mentoring juniors for the same.&lt;/li&gt;
&lt;li&gt;Got started with Freelancing too. Did some work on Flutter Development, Devops (Deployed some applications and websites) and some basic web Development stuff. Earned around 25k INR in Freelancing this year.&lt;/li&gt;
&lt;li&gt;Participated in Github Field Day India, this was just a one day event but still something that will remain in memory. Had a lot of fun that day and also received some amazing goodies and a food voucher. I also participated in various other Dev conferences this year.&lt;/li&gt;
&lt;li&gt;At last, meet some amazing folks including my batchmates, the Semikolan Co-founders, some amazing seniors and many people around different communities.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For this year, some of my wish list entries includes going deeper into Data Structures, Algorithms and Competitive Programming. (I'm 2 star rated in Codechef currently) Would also like to complete the internship I'm currently doing and just keep going :)&lt;br&gt;
We also have some big plans for Semikolan, with lot more projects, a helpful and supportive community and some grand events.&lt;/p&gt;

&lt;p&gt;This blog is also available at &lt;a href="https://blog.semikolan.co/blog/year-in-review-2021-ankurg132" rel="noopener noreferrer"&gt;Semikolan Blog&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Installing Nginx on Ubuntu and hosting Websites</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Fri, 13 Aug 2021 11:03:32 +0000</pubDate>
      <link>https://dev.to/ankurg132/installing-nginx-on-ubuntu-and-hosting-websites-533e</link>
      <guid>https://dev.to/ankurg132/installing-nginx-on-ubuntu-and-hosting-websites-533e</guid>
      <description>&lt;p&gt;Nginx, is an open source web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache. It is used frequently in deploying a web app on Virtual Machines and other IaaS services.&lt;/p&gt;

&lt;p&gt;We'll be using Microsoft Azure Virtual Machine to deploy an application using the nginx Web Server. We'll also address some common issues that one may encounter during the deployment.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting up the Virtual Machine
&lt;/h2&gt;

&lt;p&gt;First of all, we need to have an Ubuntu machine, you can get one from many popular sources including AWS, Azure, Google Cloud, DigitalOcean etc. If you just want to try out the deployment, you can also just use an Ubuntu machine using Virtual Box, VMWare etc. hosted in your own machine.&lt;/p&gt;

&lt;p&gt;After setting up the machine and opening the terminal, we should first make sure that our machine is updated using&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo apt update&lt;br&gt;
sudo apt upgrade&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Setting up Nginx Web Server&lt;br&gt;
Now that we have our machine up and running, we can now install the nginx server using &lt;/p&gt;

&lt;p&gt;sudo apt-get install nginx&lt;br&gt;
We should also check out our Network Security Group applicable in many cloud service providers and ensure that port 443 (for HTTPS) and port 80 (for HTTP) is enabled. We should also ensure the firewall rules to be allowed for port 443 and 80, we should also make sure that nginx is allowed, we can do that through&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo ufw allow 443&lt;br&gt;
sudo ufw allow 80&lt;br&gt;
sudo ufw allow 'Nginx Full'&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;There's no need to do the above steps if&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo ufw status&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;returns inactive.&lt;/p&gt;

&lt;p&gt;Now we can also enable the nginx server to run when a system boots up and start the server using:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo systemctl enable nginx&lt;br&gt;
sudo systemctl start nginx&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Setting up the Website&lt;br&gt;
After nginx is set up, we can now clone our website to the machine.&lt;/p&gt;

&lt;p&gt;We can now clone our website code in a directory already created by nginx, which is /var/&lt;a href="http://www" rel="noopener noreferrer"&gt;www&lt;/a&gt;. We can navigate to the directory using&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cd /var/www&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;If the website is hosted as a git repository, we can directly clone the website repository by using&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo git clone websiteurlhere.git&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;and this will automatically create a directory with the name of your repository. Let us assume it is "semikolan" in this case.&lt;/p&gt;

&lt;p&gt;If you do not have a Git repository, you can also download a zip file containing code using&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;sudo wget websiteurl.com/websitecode.zip&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;and then unzip the code in another folder and then proceed. &lt;/p&gt;

&lt;p&gt;Read more here: &lt;a href="https://blog.semikolan.co/blog/installing-nginx-on-ubuntu-and-hosting-websites" rel="noopener noreferrer"&gt;Installing Nginx on Ubuntu&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can now follow these blogs according to your tech stack:&lt;/p&gt;

&lt;p&gt;Laravel: &lt;a href="https://blog.semikolan.co/blog/hosting-laravel-nginx-and-common-errors" rel="noopener noreferrer"&gt;Laravel&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And you can set up an SSL certificate using &lt;a href="https://blog.semikolan.co/blog/ssl-certificate-ubuntu-certbot" rel="noopener noreferrer"&gt;this&lt;/a&gt; tutorial.&lt;/p&gt;

</description>
      <category>devops</category>
      <category>nginx</category>
    </item>
    <item>
      <title>Basics of LOLCODE</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Fri, 29 Jan 2021 07:58:34 +0000</pubDate>
      <link>https://dev.to/ankurg132/basics-of-lolcode-3cco</link>
      <guid>https://dev.to/ankurg132/basics-of-lolcode-3cco</guid>
      <description>&lt;p&gt;This is a basic tutorial about how to code using a fun language called LOLCODE. &lt;br&gt;
So LOLCODE is an esoteric programming language created in 2007 by Adam Lindsay, researcher at the Computing Department of Lancaster University.&lt;/p&gt;

&lt;p&gt;Any program of LOLCODE has a starting using "HAI [version name]" and ends with "KTHXBYE", basically what we can say in normal language a "hi" in starting and "ok, thanks, bye" in the ending. &lt;/p&gt;

&lt;p&gt;HAI 1.2&lt;br&gt;
KTHXBYE&lt;/p&gt;

&lt;p&gt;Now to print something, we use VISIBLE keyword and put the output statement after the statement, here is an example of writing Hello world -&amp;gt; &lt;/p&gt;

&lt;p&gt;HAI 1.2&lt;br&gt;
VISIBLE "HAI WORLD!"&lt;br&gt;
KTHXBYE&lt;/p&gt;

&lt;p&gt;We can write comments too using BTW (for single line) and OBTW (for multi line) as follows-&amp;gt;&lt;/p&gt;

&lt;p&gt;BTW this is a comment &lt;/p&gt;

&lt;p&gt;OBTW&lt;br&gt;
this is a&lt;br&gt;
multi line &lt;br&gt;
comment&lt;br&gt;
TLDR&lt;/p&gt;

&lt;p&gt;Remember that TLDR is used to end a multiline comment.&lt;br&gt;
This is just a short intro to LOLCODE, to learn more, &lt;a href="https://www.tutorialspoint.com/lolcode/index.html" rel="noopener noreferrer"&gt;here&lt;/a&gt; is one of the site you can refer to.&lt;/p&gt;

&lt;p&gt;You can also view a demo video here -&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/5cqEzvLEvnA"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>lolcode</category>
      <category>programming</category>
      <category>language</category>
    </item>
    <item>
      <title>My experience in MLH LHD: Build</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Tue, 19 Jan 2021 19:20:39 +0000</pubDate>
      <link>https://dev.to/ankurg132/my-experience-in-mlh-lhd-build-2453</link>
      <guid>https://dev.to/ankurg132/my-experience-in-mlh-lhd-build-2453</guid>
      <description>&lt;p&gt;In the previous week, I participated in major hacking league's local hack day: build and I would like to share my experience in the weeklong fun event. &lt;/p&gt;

&lt;p&gt;So to begin with, the first day was very much about just creating a guild, having fun in events, creating something new using a new language and a lot more. I used lolcode for the first time in this challenge (highly recommend that). I merged some pull requests for the challenge and attended some live events and workshops.&lt;br&gt;
At the end of the day, a leaderboard was released and I realized that I was around at some 70 position, that feeling excited me to do more challenges to get more points for the next day. &lt;br&gt;
Then the following days, I created a lot of things which includes working with a lot of APIs for the first time, including the OpenWeather API and twilio API using which I created &lt;a href="https://www.youtube.com/watch?v=nA5G_0upops" rel="noopener noreferrer"&gt;this Temperature Messanger&lt;/a&gt;, a &lt;a href="https://repl.it/@lordblackwood/Discord-bot#main.py" rel="noopener noreferrer"&gt;discord bot&lt;/a&gt; using discord API, and a simple &lt;a href="https://github.com/ankurg132/MLH-Local-Hack-Day-challenges/tree/main/weekend%20challenges/using%20maps" rel="noopener noreferrer"&gt;map searcher&lt;/a&gt; using openStreetMap API and some other modules. &lt;br&gt;
In addition to that, I created some android projects too using Kotlin including a basic &lt;a href="https://github.com/ankurg132/MLH-Local-Hack-Day-challenges/tree/main/day%204/ToDoApp" rel="noopener noreferrer"&gt;To-do App&lt;/a&gt; and a birthday card app following the Google's Kotlin tutorial.&lt;br&gt;
For the first time, I explored Web Scraping and created a project to get movie data from the IMDB website using beautiful-soup. &lt;br&gt;
I also used Kaggle dataset for the first time for data analysis using Python's pandas and matplotlib library. Also created some other projects including tic-tac-toe using python (also livestreamed this using twitch for the first time for a challenge), created a demo for my project, a random number generator without using random etc.&lt;br&gt;
I also coded in flask for the first time using the MLH starter kit and guidance from an MLH mentor.&lt;/p&gt;

&lt;p&gt;More than all the projects, I met some amazing people and communities throughout the week, our guild Equicode hosted a meet to share a coffee with all the guildmates, we had some nice fun interactive sessions and learned a lot from each other. I also got the chance to meet more like minded people, explore ideas and to have a lot more fun together. &lt;br&gt;
We also collaborated with other top guilds to have a session together in which I met with Eddiehub community and discussed about each other's experience. &lt;/p&gt;

&lt;p&gt;Overall, our guild came 3rd in the overall ranking and I came at 57th rank in the overall challenge, but more than that, the learning I've done during this whole week, even staying up till 4AM IST to attend the events were some of the amazing thing I did this hackathon.  &lt;/p&gt;

&lt;p&gt;You can view most of my code in this repo: &lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/ankurg132" rel="noopener noreferrer"&gt;
        ankurg132
      &lt;/a&gt; / &lt;a href="https://github.com/ankurg132/MLH-Local-Hack-Day-challenges" rel="noopener noreferrer"&gt;
        MLH-Local-Hack-Day-challenges
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;MLH-Local-Hack-Day-challenges&lt;/h1&gt;

&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;This repository contains projects created for the Major Hacking League Local Hack Day challenges.&lt;/h3&gt;

&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Also, anybody looking to create their first pull requests are welcome to add their names in CONTRIBUTORS.md file.&lt;/h3&gt;

&lt;/div&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/ankurg132/MLH-Local-Hack-Day-challenges" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


</description>
      <category>majorleaguehacking</category>
      <category>localhackday</category>
      <category>hackathon</category>
    </item>
    <item>
      <title>Creating a temperature Messanger</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Thu, 14 Jan 2021 18:20:03 +0000</pubDate>
      <link>https://dev.to/ankurg132/creating-a-temperature-messanger-1177</link>
      <guid>https://dev.to/ankurg132/creating-a-temperature-messanger-1177</guid>
      <description>&lt;p&gt;Temperature messanger is a CLI project where you can type in a city name and a reciever's contact number and the tool will send a text message to the reciever's number showing the temperature and weather of that particular city.&lt;/p&gt;

&lt;p&gt;It uses a variety of modules including yarns to let the user enter details using command prompt, request to used the API's and Twilio and open weather API to send message and recieve the data.&lt;/p&gt;

&lt;p&gt;I used &lt;a href="https://codeburst.io/build-a-simple-weather-app-with-node-js-in-just-16-lines-of-code-32261690901d" rel="noopener noreferrer"&gt;this article&lt;/a&gt; to use the open weather API and then simply followed the twilio documentation to send an SMS. &lt;/p&gt;

&lt;p&gt;Here is the demo video-&amp;gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/nA5G_0upops"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hope this helps!&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>mlh</category>
      <category>majorleaguehacking</category>
      <category>localhackday</category>
    </item>
    <item>
      <title>Creating a game in a single day</title>
      <dc:creator>Ankur Gupta</dc:creator>
      <pubDate>Mon, 11 Jan 2021 18:07:31 +0000</pubDate>
      <link>https://dev.to/ankurg132/creating-a-game-in-a-single-day-1gnj</link>
      <guid>https://dev.to/ankurg132/creating-a-game-in-a-single-day-1gnj</guid>
      <description>&lt;p&gt;Hey everyone, &lt;/p&gt;

&lt;p&gt;So in the previous weekend I registered for a major hacking league hackathon known as "Snakes and hackers", the theme looked pretty intimidating and we were very excited to learn something which we haven't before, even what we wanted was to build that using a technology which we haven't used before. &lt;/p&gt;

&lt;p&gt;So here comes the fun part, me and my friend decided to delve into game development using those fancy game engines and create a classic snakes and ladders game, as Snakes and ladders was something we've been planning to create since a long time but this time using a game engine sounded much more cooler, so yeah, we decided to go for it. &lt;/p&gt;

&lt;p&gt;Now comes the next part, where to start. So first of all, for like about the half of the first hackathon day, we just did some research about game development basics using various internet resources. That included learning how games are built, how a game prototypes are built, which game engines are suitable for what purposes etc. Most of these include random articles or YouTube videos. &lt;br&gt;
Then we decided to use the Godot game engine as from many reviews we found it good for 2D games and easy for beginners. &lt;br&gt;
So for the rest of the day, we read the whole documentation of the Godot game engine, which I feel is really very helpful. You can find the whole documentation &lt;a href="https://docs.godotengine.org/en/stable/index.html" rel="noopener noreferrer"&gt;here&lt;/a&gt;. We also looked at some of those YouTube videos teaching the basics of Godot game engine. At this point we got a sense of what things we'll be needing and the things that are needed to be done.&lt;/p&gt;

&lt;p&gt;Next comes the designing part, so as a starter, we created a very simple game board with a red line indicating snake and a blue line ladder, a dice face using Adobe Illustrator and we started coding on day 2. &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frg7fkwgm10qnt2frwclu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frg7fkwgm10qnt2frwclu.png" alt="Basic Game board" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For the next and the last day, we were about to gave up as I was really confused about how to connect the players and the board (turns out it was pretty simple), then as they say, I took a break. And somehow after the break, I decided to look for that issue and then found a very simple way to use the Path2D node. Just after realizing that, the whole game creation looked easy and finally we did it. We had the whole game ready. For the coding part, as I was proficient with Python, using GDScript felt very easy for me and I did not felt the need to learn it from somewhere else.&lt;br&gt;
For the game creation, we did all the things step by step, we started working from the start scene of finding a way to put the player token on start on first dice roll and then worked out to the condition of game when the player won the game. &lt;br&gt;
After all this, I decided to add a quit and restart button which turned out to be pretty easy in Godot game engine. (Just 2 lines of code).&lt;/p&gt;

&lt;p&gt;After all the coding done, we have some 6 hours left before the final submission, so we decided to improve the game design, so we customized the board, my friend created the fancier snakes and ladders replacing the plain lines. Here is how the final board looks-&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9bkunfm1rm9bwmpvgsol.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9bkunfm1rm9bwmpvgsol.png" alt="Board" width="601" height="1044"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Finally we created a demo video, uploaded the code on GitHub and did our final submission.&lt;br&gt;
You can find the code on &lt;a href="https://github.com/ankurg132/snake-and-ladder" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt; and the Demo video.&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/L3qx0tUQrAg"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Overall, the sense of pride we get after successfully completing the game in just one day of coding was out of the bounds and I would like to thank MLH for this opportunity.&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>mlh</category>
      <category>majorleaguehacking</category>
      <category>hackathon</category>
    </item>
  </channel>
</rss>
