Scribd
Upload
56 views

Flutter: Interactivity

This document discusses current trends in software engineering and Flutter. It covers adding interactivity to Flutter apps using stateful widgets and events. It provides an overview of state, stateful widgets, and how to use them. Examples demonstrated include a fuel consumption calculator app and use of dropdown widgets. The document also discusses gestures in Flutter apps and provides examples of common gesture events. Advanced gestures and widgets for drag and drop functionality are described. Finally, it mentions connecting Flutter apps to REST APIs.

Uploaded by

Sangakkara Warriors
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

Flutter: Interactivity

This document discusses current trends in software engineering and Flutter. It covers adding interactivity to Flutter apps using stateful widgets and events. It provides an overview of state, stateful widgets, and how to use them. Examples demonstrated include a fuel consumption calculator app and use of dropdown widgets. The document also discusses gestures in Flutter apps and provides examples of common gesture events. Advanced gestures and widgets for drag and drop functionality are described. Finally, it mentions connecting Flutter apps to REST APIs.

Uploaded by

Sangakkara Warriors
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Current trends in software Engineering

Flutter

Interactivity

SLIIT - Faculty of Computing


CTSE – SE4010

Flutter
Adding Interactivity

SLIIT - Faculty of Computing


CTSE – SE4010

Recap
• Widgets
• Stateless and State full widgets
• Single child widgets and multiple child widgets
• Image, List view , Grid view ,Stack
• Hot restart and hot reload

SLIIT - Faculty of Computing


CTSE – SE4010

Today

State and State full Widgets


Events
• OnChanged
Overview • OnSubmitted
• Text Widget and TextEditingController
Widgets
• Dropdown buttons , Dropdownitems

Demo :
• Hello Dilani
• Fuel Consumption Calculator

SLIIT - Faculty of Computing


CTSE – SE4010

State
State is information that can be read synchronously when the
widget is build and might change during the life time of the
widget .

SLIIT - Faculty of Computing


CTSE – SE4010

Using State Full widgets..

SLIIT - Faculty of Computing


CTSE – SE4010

State Full Widgets in Action

SLIIT - Faculty of Computing


CTSE – SE4010

Layout widgets

SLIIT - Faculty of Computing


CTSE – SE4010

State maintenance widgets

SLIIT - Faculty of Computing


CTSE – SE4010

Statefull Widgets

SLIIT - Faculty of Computing


CTSE – SE4010

Decoration….?

SLIIT - Faculty of Computing


CTSE – SE4010

Drop Downs
• Generics type

SLIIT - Faculty of Computing


CTSE – SE4010

Lets Create Fuel Calculator…..

SLIIT - Faculty of Computing


CTSE – SE4010

SLIIT - Faculty of Computing


CTSE – SE4010

Introduction to Gestures
• Gestures are primarily a way for a user to interact with a mobile (or any touch
based device) application. Gestures are generally defined as any physical action /
movement of a user in the intention of activating a specific control of the mobile
device.
• Gestures are as simple as tapping the screen of the mobile device to more
complex actions used in gaming applications.
• Tap: Touching the surface of the device with fingertip for a short period and then
• releasing the fingertip.

SLIIT - Faculty of Computing


CTSE – SE4010

Widely used gestures


• Tap: Touching the surface of the device with fingertip for a short period and then
releasing the fingertip.

• Double Tap: Tapping twice in a short time.

• Drag: Touching the surface of the device with fingertip and then moving the
fingertip in a steady manner and then finally releasing the fingertip.

• Flick: Similar to dragging, but doing it in a speeder way.

• Pinch: Pinching the surface of the device using two fingers.

• Spread/Zoom: Opposite of pinching.

• Panning: Touching the surface of the device with fingertip and moving it in any
direction without releasing the fingertip.

SLIIT - Faculty of Computing


CTSE – SE4010

Gesture Events
Tap Vertical drag
• onTapDown • onVerticalDragStart
• onVerticalDragUpdate
• onTapUp
• onVerticalDragEnd
• onTap
• onTapCancel
Horizontal drag
• onHorizontalDragStart
Double tap • onHorizontalDragUpdate
• onHorizontalDragEnd
• onDoubleTap
Pan
Long press • onPanStart
• onPanUpdate
• onLongPress • onPanEnd

SLIIT - Faculty of Computing


CTSE – SE4010

onTap……

SLIIT - Faculty of Computing


CTSE – SE4010

Lets See example of Gestures


• https://flutter.dev/docs/cookbook

SLIIT - Faculty of Computing


CTSE – SE4010

• Flutter also provides a low-level gesture detection


mechanism through Listener widget. It will detect
all user interactions and then dispatches the
following events:
• PointerDownEvent
• PointerMoveEvent
• PointerUpEvent
• PointerCancelEvent

SLIIT - Faculty of Computing


CTSE – SE4010

Advanced gestures
• Flutter also provides a small set of widgets to do specific as well
as advanced gestures. The widgets are listed below:
• Dismissible: Supports flick gesture to dismiss the widget.
• Draggable: Supports drag gesture to move the widget.
• LongPressDraggable: Supports drag gesture to move a widget,
when its parent widget is also draggable.
• DragTarget: Accepts any Draggable widget.
• IgnorePointer: Hides the widget and its children from the gesture
detection process.
• AbsorbPointer: Stops the gesture detection process itself and so
any overlapping widget also can not able to participate in the
gesture detection process and hence, no event is raised.
• Scrollable: Support scrolling of the content available inside the
widget

SLIIT - Faculty of Computing


CTSE – SE4010

Rest API with Flutter


• https://www.c-sharpcorner.com/article/flutter-
rest-api/

SLIIT - Faculty of Computing

You might also like