FLUTTER WIDGETS: THE BASICS

Claudia
Claudia
Mar 6, 2019 · 3 min read

Okay, so previously, we discussed the basics of FLUTTER. Today, we’re taking on something different but still about flutter, flutter widgets. By now, we should already know that flutter is both an SDK which builds an app as well as a dart framework that offers a rich set of classes and widgets which can be used to build our flutter app.

Everything on flutter is a widget and flutter is all about widgets. Widgets can be referred to as the core building blocks used to build the User Interface (UI) for flutter apps. The UI is composed from a set of built-in widgets which can be put together as a personal custom widget and can read usable UI component which is to be used in evolving the UI.

STATELESS AND STATEFUL WIDGETS

Both widgets are written as StatelessWidget and StatefulWidget respectively.

Stateless Widgets are used to create a widget where you render something to the UI and you can pass data to them, the data can change externally. The UI of the stateless widget gets re-rendered when the input data changes. The stateless widget has a build network that builds a widget tree and is able to accept extra data; It only calls build() if it’s created for the first time or for extra data which it receives .

Stateful Widgets are all about returning widgets where you can render the UI and receive input data which can change externally. There’s an internal state which can be changed from within the widget which will also need to be rendered. It gets re-rendered when the input data or local state changes.

Commonly used widgets include:

  • Text — A widget used to simply simply text on the screen.
  • Image — For displaying images.
  • Icon — For displaying Flutter’s built in Material and Cupertino icons.
  • Container — The div of Flutter UI. It's a convenience widget that allows you to add padding, alignment, backgrounds, force sizes on widgets, and boatloads of other things. It also takes up 0px space when empty, which comes in handy.
  • TextInput — To handle user feedback.
  • Row, Column — These are widgets that display a list of children in horizontal or vertical directions. They follow flex-box rules for layout, if you’re coming from the web and know CSS.
  • Stack — A stack displays a list of children on top of one and other. This functions much like the ‘position’ property in CSS.
  • Scaffold — This is the root of every page in your app, which gives your app a basic layout structure. It makes it easy to implement bottom navigations, appBars, back buttons, etc.
  • Stack — A stack displays a list of children on top of one and other. This functions much like the ‘position’ property in CSS.
  • Constructor Function
  • build()function: It can be called multiple times whenever the external data changes
  • Constructor function is also available here.
  • initstate() :runs before the build() runs
  • build()
  • setState()
  • didUpdateWidget()

So these are a few widget basics. There are still a lot more things to be learned about; you could always refer to this for more info about flutter widgets.

SOURCES:

Maximilian Schwarzmüller on udemy.com

https://flutterbyexample.com/flutter-widgets/

Code and Design

A community dedicated to teaching mobile development, web…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store