{"id":4506,"date":"2025-01-04T14:05:51","date_gmt":"2025-01-04T14:05:51","guid":{"rendered":"https:\/\/www.qworqs.com\/blog\/?p=4506"},"modified":"2025-01-04T14:17:06","modified_gmt":"2025-01-04T14:17:06","slug":"my-flutter-notes-2","status":"publish","type":"post","link":"https:\/\/www.voodoo.business\/blog\/2025\/01\/04\/my-flutter-notes-2\/","title":{"rendered":"My Flutter notes"},"content":{"rendered":"\n<p>I recommend you read this after reading <a href=\"\/blog\/2025\/01\/03\/my-dart-notes\/\">My Dart Notes<\/a>.<\/p>\n\n\n\n<p>this document is a reminder of everything Dart related ! There is a different one for flutter.<\/p>\n\n\n\n<p>Why ? Because I have a problem, I don\u2019t limit myself to a few languages like normal human beings, I know A LOT of programming languages, and when you don\u2019t use a language long enough, you start messing up which syntax works where, so I create those small \u201cReminder\u201d pages that I can skim through in an hour before I start working with any language after leaving it for some time !<\/p>\n\n\n\n<p>Mind you, I eventually lose the page \u201cin the (It is on some hard drive somewhere) and that is because after using it a couple of times, I no longer need it. but when i come across old ones, I will post them on this blog.<\/p>\n\n\n\n<p>I am posting this one online because I am composing it now, and I haven\u2019t lost it yet <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>1- react&#8217;s expo is the main alternative (Or KMP\/KMM)<\/p>\n\n\n\n<p>2- navigation, theming, and localization.<br>MeterialApp vs CupertinoApp&#8230;.<\/p>\n\n\n\n<p>For more on Cupertino =&gt; https:\/\/www.youtube.com\/watch?v=3PdUaidHc-E&amp;t=5s<\/p>\n\n\n\n<p>Flutter does not embrace the native platform, it doesn&#8217;t take advantage of the apple and android stuff<\/p>\n\n\n\n<p>Flutter&#8217;s Impeller (rendering runtime) replaces SKIA and improves the rendering on IOS (Use the GPU)<\/p>\n\n\n\n<p>using the fragment programming api, you can create your own shaders<\/p>\n\n\n\n<p>In react\/Expo, you have to build everything (Styling\/component libraries) and there is more to learn even though if you do react-web you will become react native in a few hours<\/p>\n\n\n\n<p>react native bridge is a bottleneck, it will improve soon<\/p>\n\n\n\n<p>If you want to have the iOS look on iOS, and the android look on android, check this out<\/p>\n\n\n\n<p><a href=\"https:\/\/dev.to\/fluttertanzania\/difference-between-material-cupertino-in-flutter-5ob\">https:\/\/dev.to\/fluttertanzania\/difference-between-material-cupertino-in-flutter-5ob<\/a><\/p>\n\n\n\n<p>problem with Cupertino on android is that due to copyright issues, the fonts and other things won&#8217;t render on android !<\/p>\n\n\n\n<p>WidgetsApp = when you want to use your own ! alternative to Material and Cupertino<\/p>\n\n\n\n<p><strong>Navigator 1.0:<\/strong> there is also 2.0 that is a little bit more complex, Small applications without complex deep linking can use Navigator, while apps with specific deep linking and navigation requirements should also use the <strong>Router<\/strong> to correctly handle deep links on Android and iOS,<\/p>\n\n\n\n<p>Firebase, AWS amplify, superbase,&nbsp;<\/p>\n\n\n\n<p>mediaQuerry and layout builder are gret for responsive UI and are builkt into flutter<\/p>\n\n\n\n<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br><\/p>\n\n\n\n<p>Don&#8217;t start with flutter before getting really familiar (read and memorize, not necessarily practice), it will take longer to memorize if you don&#8217;t understand how shit works<\/p>\n\n\n\n<p>DevTools<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Dive into DevTools\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/_EYk-E29edo?start=6&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>1- when you combine widgets, they make a widget tree<\/p>\n\n\n\n<p>2- WIDGETS ARE EITHER STATELESS OR STATEFUL !<\/p>\n\n\n\n<p>The above statement is wrong if we are strictly speaking, all widgets are stateless, a companion state widget is what is stateful in a stateful widget, not the widget itself<\/p>\n\n\n\n<p>stateless widgets are immutable widgets where the only way to modify a stateless widget is to delete and recreate it<\/p>\n\n\n\n<p><strong>Kickoff<\/strong><\/p>\n\n\n\n<p>In flutter, within the main dart function, the kickoff is calling the runApp function.<\/p>\n\n\n\n<p>although you can call everything directly from within the runApp, it is recommended to have runApp get a parameter of a certain class you create that returns a widget !<\/p>\n\n\n\n<p>The main method to override in a StatelessWidget is build()<\/p>\n\n\n\n<p>&#8212;-<\/p>\n\n\n\n<p>&nbsp;the first thing inside the runApp is usually <strong>MaterialApp<\/strong> which implements a lot of features required in an app, such as navigation, theming, and localization. now MaterialApp is google&#8217;s material design widget implementation, you can also use&nbsp; <strong>CupertinoApp<\/strong> if you want apples design thing, or <strong>WidgetsApp<\/strong> if you want your own ! for now, we will use MaterialApp<\/p>\n\n\n\n<p>When something extends StatelessWidget, the constructor should pass the OPTIONAL &#8220;key&#8221; parameter to the super class<\/p>\n\n\n\n<p>MaterialApp = Widget<br>Container = Styled Box Widget<br>Padding = The Padding widget will adjust the spacing of its child which can be any widget of any shape or size<br><\/p>\n\n\n\n<p>Probably one of the most popular widgets in an app is AppBar<\/p>\n\n\n\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Flutter forms<\/h1>\n\n\n\n<p>Net Ninja: https:\/\/www.youtube.com\/watch?v=2DX0TtM9Hug<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recommend you read this after reading My Dart Notes. this document is a reminder of everything Dart related ! There is a different one for flutter. Why ? Because I have a problem, I don\u2019t limit myself to a few languages like normal human beings, I know A LOT of programming languages, and when [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[203,160],"tags":[],"class_list":["post-4506","post","type-post","status-publish","format-standard","hentry","category-dart-flutter","category-software-development"],"_links":{"self":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts\/4506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/comments?post=4506"}],"version-history":[{"count":5,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts\/4506\/revisions"}],"predecessor-version":[{"id":4515,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts\/4506\/revisions\/4515"}],"wp:attachment":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/media?parent=4506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/categories?post=4506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/tags?post=4506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}