Onboarding
Last updated
Last updated
This page shows the first screen your users will see when opening your app.
To build the Onboarding page:
First, we need to from the Pages Panel. From the hamburger menu, set it as the first page by clicking on Make First Page.
Navigate to the Widget Tree, and now you can start adding widgets to see the changes you make.
For our design, all the elements are present in a Column order, i.e. all the elements are present in a vertical order. So, we need to start with a Column Widget. Click on the Add Widget button, and select Column from the menu.
Inside the Column widget, we need to add our widgets to make our required design. First, add a Text Widget with the values "Bytes".
Inside the Column widget only, add a Rich Text widget, with two Text Spans. The first one with the Text, "Stoppage for your " and the second with "Curiosity". We have to use Rich Text widget to define different properties for Text inside same widget. (Note that "Curiosity" has a different color from the rest of the text).
Add a Text widget with the values "Discover Bytes, an intuitive and versatile Content Platform powered by Digia."
Lastly, we need to add a Button with the Text "Get Started" which will be used to navigate to the Courses page.
For Navigation, first we need to create a new page, "Courses" (Note: You are free to name it whatever you wish). Navigate to the Button widget, click on the Event Handlers button, and add an event with the Action: Go to Page and select the Courses page from the dropdown. Now, you can navigate from the Onboarding page to the Courses page.
In this step, we'll add add colors, spacing and make our app beautiful.
Let's work widget by widget. First, to provide some spacing, select the Column widget, go to the Default Properties, and set Margin with values = Left: 16, Top: 16, Right: 16, Bottom:16
Go to the first Text widget, and set Text Alignment as Center. Go to Text Span Style Properties, and select Font Token Dropdown -> Display Large. Also, set the Text Color as #FFFFFF to set it as white.
To add a background to the Bytes Text, navigate to the Default properties on the Text widget, and set Widget Alignment -> Center. Inside Styling Properties, set Background Color as #04A24C (or any other color you like). Set the Width = 400 PX and Height = 45%.
Set the Alignment as Center to perfectly align the Text in the middle. Set the Border Radius with the values = TL: 18, TR: 18, BL: 18, BR: 18, for setting the radius.
Set the Text Span Style Properties, Font Token as "Headline Large", and set the text color for the second Text as #1C4494. Also, to provide some spacing between the Text Block, select Rich Text widget and go to the Default Properties. Set Margin with values = Top: 20.
Select the third Text widget, inside the Text Span Style Properties, set the Font Token as Title Medium. To provide spacing, select Default Properties, and add Margin with the values = Top:20.
To customize the Button Widget, inside the Widget Properties, Text, go to the Text Span Style Properties, and Font Token as Title Medium. Also, set the Text Color as #FFFFFF. Go the the Default Properties, and set Widget Alignment as Top Left. Inside the Styling Properties, set the Padding with values = Left:10, Top:10, Right:10, Bottom:10, and Margin with values = Top:30. Set the Background Color as #04A24C, and set the Border Radius with the values = TL: 25, TR: 25, BL: 25, BR: 25, for setting the radius.
