Flutter Vignette – Boarding Pass

Playing fairly….

How to master the Boarding Pass Vignette (by gskinner team)…Hmmm

Brief…

For Flutter Interact ’19, Google challenged gskinner to showcase the Flutter framework’s capabilities to build beautiful apps.

What are we covering today…?

Begin…

This tutorial is divided into 4 steps :

1. Boarding Pass UI as per Vignette
2. Folding/Unfolding of the Boarding Pass
3. Theming of the pass
4. Scrolling to the open pass…

Step 1 :

Data part is static and is taken from the original source code….

We replicate the data for 4 cards (static data)….

One card is a Column of 

• LogoHeader (Fluttair)
• Separator (Thin Black color)
• Ticket Header (PassengerName and Boarding Time) (which itself is a row)
• Stack of children (Origin, Duration and Destination)
• BottomIcon (Keyboard arrowdown)

For the airplane, when a ticket is clicked, an animation gets triggered…

Basically, the flight slides from one position to another…

Here, is the Source Code for Step 1 

Step 2 :

We focus on the folding/unfolding of the card….

Introduce a class called FoldEntry…

Parameters for Transform Widget :

• alignment : Alignment of the origin (Our case FractionalOffset.center)
• transform : Matrix to transform…
• child : Widget on which Transformation occurs

Note: For details about the number (3, 2, 0.001) refer this…..

On the click of the card, we encapsulate the clicking as 

_getEntries() function comprises of the FoldEntry widgets….

List<FoldEntry> _getEntries() {
  return [
      FoldEntry(height: 160.0, front: topCard),
      FoldEntry(height: 160.0, front: middleCard, back: frontCard),
  ];
}

For every back parameter, there will be a flip (3d)…. We have currently 2 items in the List<FoldEntry>, namely 

• Flight Summary (From where to where)
• Flight Details (Gate, seat number etc) (flight_details.dart)

isOpen parameter is responsible for playing the animation (flight animation), when the card is not clicked no animation takes place, but once clicked flight animation triggers……

FoldingTicket is a Stateful widget, which adjusts the height of the card, i.e expand the child height when opened vs closed…It does that while playing some animation….

---

Here, is the source code for Step 2…..

---

Step 3:

We include the third entry into the _getEntries function

List<FoldEntry> _getEntries() {
    return [
      FoldEntry(height: 160.0, front: topCard),
      FoldEntry(height: 160.0, front: middleCard, back: frontCard),
      FoldEntry(height: 80.0, front: bottomCard, back: backCard)
    ];
}

This third entry is the barcode widget, (flight_barcode.dart). As the barcode widget only contains image, hence the height is 80.0

This step also includes the theming (see below),

Once the card is clicked, background and text color changes to incorporate as per the dark theme.

enum SummaryTheme { dark, light }

As the card is clicked, we set the theme and let the widget take care of the displaying (as per theme)…

---

Here, is the source code for step 3.

---

Step 4 :

Till now, whenever the card was clicked, it displayed the animation or folding/unfolding, but if the card was in focus, it would certainly go out of the selection area…

This step not only respects previous steps, but also makes sure that the card selected always remain in focus…

Introducing ScrollControllers….

We can move to a particular position using ScrollController as 

_controller.animateTo('Offset in double',
 curve: Curves.linear, duration: Duration (milliseconds: 500));

or

_controller.jumpTo('Offset in double');

For getting the offset in our case, some calculations was involved, but these calculations depend entirely on the params, which programmer sets…

Hence, no hard and fast rule….

Final source code, here….