Onboarding Exercise

Flutter UI Designs

Overview

This series of screens is called on-boarding screens. It acts as an introduction to an app or as a means of helping users with features within an app.

Features

For this design, I picked a layout from Pinterest. The on-boarding design appears to be for an exercise related app.

  • The layout consists of three gradient screens.
  • Each screen has a number of large circles with varying sizes and opacities.
  • There are also a number of small circles sprinkled about like planets orbiting a sun.
  • In the center of each screen, there is an image and related text.
  • There are two buttons at the bottom of the screen that are static through the scrolling screens. The first button is a gradient and the second button is an outline.
  • There is also a dot indicator to indicate to the user which screen is current.

Implementation

For the images, I used some Yoga vectors I found online. I made a few modifications to the colors using a graphics app. The rest is all code.

First, I created a main screen with a PageView widget which is used to move through the on-boarding screens.

child: new PageView.builder(
physics: new AlwaysScrollableScrollPhysics(),
controller: _controller,
itemCount: _pages.length,
itemBuilder: (BuildContext context, int index) {
return _pages[index % _pages.length];
},
onPageChanged: (int p){
setState(() {
page = p;
});
},
),

I added an AppBar to display a title and an action to move to the next screen. I added a Row widget with the buttons and positioned it at the bottom of the screen. Flutter makes styling the buttons very easy. I chose to use a Container widget with a BoxDecoration.

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
width: 150.0,
height: 50.0,
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [
Colors.orange[600],
Colors.orange[900],
],
begin: Alignment(0.5, -1.0),
end: Alignment(0.5, 1.0)
),
borderRadius: new BorderRadius.circular(30.0),
),
child: new Material(
child: MaterialButton(
child: Text('I\'M NEW',
style: Theme.of(context).textTheme.button.copyWith(color: Colors.white),
),
onPressed: (){},
highlightColor: Colors.orange.withOpacity(0.5),
splashColor: Colors.orange.withOpacity(0.5),
),
color: Colors.transparent,
borderRadius: new BorderRadius.circular(30.0),
),
),
new Container(
width: 150.0,
height: 50.0,
decoration: BoxDecoration(
borderRadius: new BorderRadius.circular(30.0),
border: Border.all(color: Colors.white, width: 1.0),
color: Colors.transparent,
),
child: new Material(
child: MaterialButton(
child: Text('LOG IN',
style: Theme.of(context).textTheme.button.copyWith(color: Colors.white),
),
onPressed: (){},
highlightColor: Colors.white30,
splashColor: Colors.white30,
),
color: Colors.transparent,
borderRadius: new BorderRadius.circular(30.0),
),
),
],
),

For the dot indicator I used a nice script by collinjackson on Gist. I wrapped all the widgets with a Positioned widget and added them as children to a Stack.

Next, I created three separate on-boarding screens with very similar code. The differences are the text, the image and the gradient color.

This can be improved by creating one page widget which accepts the gradient colors, the text and the image.

One challenge I found was creating large circles that expanded beyond the width and height of the screen. I had to use a combination of the Stack, Positioned and ClipRect widgets to achieve the desired affect. I chose to randomize the size, position and opacity of the circles. As a result, each viewing of the screens is unique.

The gradient for the screen, as with the buttons on the main page, are created using a BoxDecoration on a Container widget. Last, the image and text were added as children to a Column widget.

Demo


The complete source code can be found here.


As always, this is one of many possible ways to design this UI. If you feel this design could be improved, please feel free to leave me a comment.