The latest articles on DEV Community by Iqra Fatima (@iqrafatimame). https://dev.to/iqrafatimame 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%2F370243%2Fb0afb9ca-f9f0-46f7-9711-acf9a1c13c0d.jpeg https://dev.to/iqrafatimame en Iqra Fatima Wed, 29 Apr 2020 09:23:29 +0000 https://dev.to/iqrafatimame/flutter-difference-between-stateful-and-stateless-widget-54le https://dev.to/iqrafatimame/flutter-difference-between-stateful-and-stateless-widget-54le <p>📲 As we know that all the User Interface(UI) components in Flutter are known as widgets. The widgets can be just of two types.</p> <ul> <li>1️⃣ Stateful Widgets </li> <li>2️⃣ Stateless Widget</li> </ul> <p>Let's discuss how they differ:</p> <h1> ⚡ <strong>Stateless Widget</strong> </h1> <p>A stateless widget can not change their state during the runtime of an app which means it can not redraw its self while the app is running. Stateless widgets are immutable.</p> <h2> 🤔 How to create a Stateless Widget ?! </h2> <p>🤔 How to create a Stateless Widget ?!<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--s4c3CxjE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/vispo79w7q3tiwzml3ud.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--s4c3CxjE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/vispo79w7q3tiwzml3ud.png" alt="Alt Text"></a></p> <p>Let's understand this code snippet.<br> The name of the stateless widget is <strong>HomeScreen</strong>, inside which we have to override the build method. The build method takes the <strong>BuildContext</strong> as parameters and returns a widget. Below there is the place where you can design the UI of the <strong>HomeScreen</strong>.</p> <blockquote> <p>The build(…) function of the StateLessWidget is called only ONCE. To redraw the StatelessWidget, we need to create a new instance of the Widget.</p> </blockquote> <h2> 😕 Where to use?! </h2> <p>A stateless widget is used where you are not required to redraw a widget again &amp; again, such as AppBar, scaffold, &amp; icons, etc.</p> <h1> ⚡ <strong>Stateful Widget</strong> </h1> <p>A stateful widget can redraw itself multiple times, while the app is running which means its state is mutable. For example, when a button is pressed, the state of the widget is changed.</p> <h2> 🤔How to Create a Stateful Widget?! </h2> <p>Look at the structure of the stateful widget:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YBZPybuS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/33xhzdgu9tainuea8yw6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YBZPybuS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/33xhzdgu9tainuea8yw6.png" alt="Alt Text"></a><br> Let's understand this code snippet.<br> Here we have a class of <strong>HomeScreen</strong> which extends from a <strong>Statefulwidge</strong>t &amp; it has to return the instance of the class <strong>_HomeScreen</strong> in the <strong>createState()</strong> method. The class <strong>_HomeScreenState</strong> extends from <strong>State&lt;&gt;</strong> which takes <strong>HomeScreen</strong> as a template input.</p> <p>Now, this <strong>_HomeScreenState</strong> overrides the build method and returns a widget. Below there you can add the UI of the app, which is stateful and can be called multiple times using <strong>setState</strong> method.</p> <h2> 😕 Where to use?! </h2> <p>Let's say you have a timer on the top of your app &amp; the state of it is changing every second. If your entire app is in a stateful widget then its rebuilding the entire app every second which is pretty expensive. If you just extend the TimeText to a stateful TimerText then an only tiny piece of app is updating every second now.</p> <p>👋 That’s all folks, thanks! if you like this post, don’t forget to leave a comment! 🤩</p> flutter widget Iqra Fatima Mon, 20 Apr 2020 17:55:53 +0000 https://dev.to/iqrafatimame/why-you-should-learn-flutter-in-2020-5d2c https://dev.to/iqrafatimame/why-you-should-learn-flutter-in-2020-5d2c <h1> 🤔 What is Flutter!? </h1> <p>Just in case you have not heard about Flutter, it is an open-source User Interface (UI) framework created by Google back in May 2017. It allows you to build cross-platform mobile applications using Dart. Thus, allowing you to write the same codebase throughout the development. ⚡️</p> <p>😁 If by now you are convinced to dabble with Flutter then you should definitely know two of its most important parts:</p> <ul> <li>📦 A Software Development Kit (SDK) <ul> <li>An SDK is a collection of software development tools in one installable package</li> <li>They make your app development process easier by providing you with a compiler, debugger &amp; perhaps a software framework.</li> </ul> </li> <li>📖 A Widget Library <ul> <li>A collection of reusable UI components such as buttons, text inputs, image, slider, columns &amp; so on.</li> </ul> </li> </ul> <p>Flutter makes use of the programming language Dart which is super easy to learn if you are already familiar with languages such as Java, JavaScript (JS) and C#. 🙌🏻</p> <h1> 👨🏻‍💻 How Flutter Started Trending?! </h1> <p>Flutter has been around for quite a long time but it started getting popularity right after <a href="https://developers.google.com/events/flutter-live/">Flutter Live</a> on December 4, 2018. It was then when Google announced the first stable release of flutter with loads of new features including support for macOS alpha, add to the app, IOS 13 dark mod, Dart 2.7 and many more.</p> <h1> 🎩 Why Adopt Flutter in 2020 for Development?! </h1> <p>There are several reasons why you should learn &amp; work with Flutter in 2020. There is a growing list of tech giants that are using Flutter in their development including Google, Alibaba, eBay and so on. 🚀</p> <h2> ⚙️ Easy to Learn and Use </h2> <p>It is easier to build a rich and intuitive UI in Flutter since it is a UI development kit that integrates prepackaged widgets for Material Design and Cupertino instead of Android XML. It also has a growing community which always helps you out with you as much as they can. The following are some of the amazing resources I have found &amp; used a lot of time over my run in Flutter.</p> <ul> <li>👌🏻 <a href="https://flutterawesome.com/">Flutter Awesome</a>: Best Flutter libraries &amp; tools all in one place.</li> <li>🙌🏻 <a href="https://github.com/Solido/awesome-flutter">Awesome Flutter</a>: A GitHub repository with a list of articles, videos and so on to help you learn flutter.</li> <li>⚡️ <a href="https://itsallwidgets.com/">It’s All Widgets</a>: An open list of apps built with flutter.</li> <li>✍🏻 <a href="https://medium.com/flutter-community">Flutter Community</a>: A Medium publication where you can find articles, tutorials, and a lot more amazing stuff about Flutter.</li> <li>📝 <a href="https://www.appbrewery.co/p/flutter-development-bootcamp-with-dart1/?fbclid=IwAR14_a3YckE-Qmn25ucUcPQJvzSpvyPJajiHc7Im1wlzbQooudFnDMYgwjo">The App Brewery</a>: Free course Flutter course curated &amp; created by the Google Flutter Team &amp; App brewery.</li> </ul> <h2> 🚀 Developers Productivity </h2> <p>Every time developers make changes to the app, they have to rebuild the app or third-party dependencies in some cases to see the changes in the emulator or on devices. As a native Android developer, you might have experienced this slow process as Gradle builds can take a lot of time. 😬</p> <p>🔥 Flutter provides this awesome Hot Reload feature that allows you to see the reflected change after bug fixes, building UI and even adding certain features to the app without running your application over and over again. Isn’t it just amazing?!</p> <h2> 🙌🏻 Awesome Documentation </h2> <p>Good documentation is very important for any product whatsoever. With that being said, Flutter provides this amazing <a href="https://flutter.dev/docs">documentation</a> that teaches you a lot about this framework. Everything there is very detailed &amp; meticulously curated with some awesome examples. It’s always been my first go resource when I get stuck somewhere.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eKYqTjf_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3w1yk2ki46udgsjc52o7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eKYqTjf_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3w1yk2ki46udgsjc52o7.png" alt="Alt Text"></a></p> <h1> 😵 How to Start?! </h1> <p>If you liked Flutter and want to try it on your own, the best idea is to start <a href="https://codelabs.developers.google.com/codelabs/flutter/#0">Google Codelabs</a>. After these Codelabs, you’ll make a simple and beautiful <strong>Chat message application</strong>.<br> . . .</p> <p>👋 That's all folks, thanks! if you like this post, don't forget to leave a comment! 🤩</p> flutter dev dart