Creating UI with Flutter
Rajat Kumar Nayak
@EnigmaVssut
What’s the Point
● Widgets are classes used to build UIs.
● Widgets are used for both layout and UI elements.
● Compose simple widgets to build complex widgets.
Widgets
Flutter widgets are built using a modern framework that takes
inspiration from React. The central idea is that you build your UI out of
widgets. Widgets describe what their view should look like given their
current configuration and state. When a widget’s state changes, the
widget rebuilds its description, which the framework diffs against the
previous description in order to determine the minimal changes
needed in the underlying render tree to transition from one state to
the next.
Widgets
MaterialApp Class
A convenience widget that wraps a number of widgets that are commonly
required for material design applications.
It comes with:-
● Scaffold Widget
● Appbar Widget
● BottomNavigationBar etc.
Scaffold Widget
Implements the basic material design visual layout structure.
The scaffold will expand to fill the available space. That usually means
that it will occupy its entire window or device screen.
Container
The container in Flutter is a parent widget that can contain multiple
child widgets and manage them efficiently through width, height,
padding, background color, etc.
STAGE-1
Widget Tree for the UI
Build a UI
ListView
ListView is the most commonly used scrolling widget. It displays its children
one after another in the scroll direction. In the cross axis, the children are
required to fill the ListView.
Let’s Connect! 👨👦👦
@gdscvssut
DSC VSSUT Burla
GDSC VSSUT Burla
@gdscvssut
http://bit.ly/dscvssut-youtube
https://discord.gg/tYx6ActNtc
Follow us on our social media handles and
Stay tuned to our recent updates!
Thank you!

Flutter-Festivals Day-2.pptx

  • 1.
    Creating UI withFlutter Rajat Kumar Nayak @EnigmaVssut
  • 2.
    What’s the Point ●Widgets are classes used to build UIs. ● Widgets are used for both layout and UI elements. ● Compose simple widgets to build complex widgets.
  • 3.
    Widgets Flutter widgets arebuilt using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
  • 4.
  • 5.
    MaterialApp Class A conveniencewidget that wraps a number of widgets that are commonly required for material design applications. It comes with:- ● Scaffold Widget ● Appbar Widget ● BottomNavigationBar etc.
  • 6.
    Scaffold Widget Implements thebasic material design visual layout structure. The scaffold will expand to fill the available space. That usually means that it will occupy its entire window or device screen.
  • 8.
    Container The container inFlutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc.
  • 9.
  • 10.
  • 11.
  • 12.
    ListView ListView is themost commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.
  • 13.
    Let’s Connect! 👨👦👦 @gdscvssut DSCVSSUT Burla GDSC VSSUT Burla @gdscvssut http://bit.ly/dscvssut-youtube https://discord.gg/tYx6ActNtc Follow us on our social media handles and Stay tuned to our recent updates!
  • 14.