Ahoy, Thanks for being here :)
I have a quote for you which says that,
There's no substitute for hard work.
Now let's get to today's topic, i.e. pages.
First of all, you may ask why I should even care, what pages are in Flutter?
My answer
You can think of that your app as actually a website and a website needs some pages to view the content on your site.
So this means pages are something important. So there's no problem in learning about pages in Flutter.
What are we going to learn in this article?
We will be learning about,
- Safe area and its importance.
- Adding an image in our application.
- Using Textformfield in our application and its importance.
- How to choose colors to use.
- How to navigate through different pages.
So now let's get started!
I will be considering the design of our application as shown in my previous article.
Get into the login.dart file and import the material.
here's how,
import 'package:flutter/material.dart';
Now type stless to click on the template recommended by your text editor or ide.
This will insert a stateless widget into your code.
Hey, but what is a stateless widget?
The widgets whose state can not be altered once they are built are called stateless widgets. These widgets are immutable once they are built i.e any amount of change in the variables, icons, buttons, or retrieving data can not change the state of the app.
In simple words, A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets.
So, according to our design, there's an image or illustration at the upper part of our page/screen.
But how to add that image to our application?
Here come's our widget named image.asset which takes the address of the image in a directory as an argument.
Image.asset(
"assets/image2.png",
fit: BoxFit.cover,
),
You may ask a question, what is this BoxFit.cover means in our code?
what a cover constant does is, clips the picture if it is not fitting inside our box.
It is good to use when we don't want our image to be enlarged or scaled up for making that image fit inside that box.
Though you can try this by using the fill constant instead of cover.
There's another constant too, which is named contain, It is a kind of box which can be as large as it can.
You may ask me, where I should place my image?
And how am I going to tell the Flutter, that here's my image I am going to use?
Create a folder named assets inside the root folder of our project and create one more folder named images inside the assets folder.
And here our images will be stored.
Here's how our file structure will look like,
But wait, we are not done yet. We have to tell Flutter that here's my image will be getting stored.
Now open the pubspec.yaml file and paste this piece of code.
assets:
- assets/images/
Please refer to the comments too, If you are facing some issue or don't be shy about texting me.
What this line of code saying is,
hey Flutter, remember that my assets will be stored in this folder!
But you may also ask what is an asset in the first place.
I did a google search for you.
Thing that is useful to somebody/something is known as an asset.
Let's check how to use the text form field?
A FormField that contains a TextField.
This is a convenience widget that wraps a TextField widget in a FormField.
The Form simply makes it easier to save, reset, or validate multiple fields at once.
Here's how it is used
TextFormField(
controller: someTextEditController,
decoration: InputDecoration(
labelText: "Username or Email",
hintText: "you@yourmail.com",
),
),
Hey, but what is that Text Edit Controller?
It is a controller for an editable text field. Something which can be modified from the user's side. This can be used to store the email address or password of the user or anything else.
but you may also ask what are those label text and hint text doing inside decoration?
I cannot explain this question, but this picture can surely help you understand what it is.
Now we are done with the text form field and image, the next thing we need is a login button in our application.
We have some options to choose from like the Text button, Elevated button, etc.
For now, we will be using the ElevatedButton.
You may also ask how these buttons differ from one another?
I want you to see the image given below, which will give you some idea about how they look.
And please note that every button has the same or similar functionality, it's just a matter of how they look. Though there are some differences, which you will come to know in our later articles.
Here's how to use an elevated button as our widget,
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyHomePage(title: "Gulshan Yadav"),
),
);
},
child: Text(
"$task",
style: TextStyle(fontWeight: FontWeight.bold),
),
)
You may ask us what is that Navigator.push it seems a bit overwhelming naa?
It's just saying to our app that you route me to the Homepage if I click that login button!
And that's it.
So after all these concepts, leme share the actual code for the login page with you.
import 'package:firstapp/pages/homepage.dart';
import 'package:flutter/material.dart';
import 'dart:async';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Material(
color: Colors.white,
child: Center(
child: Column(
children: [
Image.asset(
"assets/images/image2.png",
fit: BoxFit.cover,
),
Text(
"Welcome",
style: TextStyle(
fontSize: 21.0,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30,
vertical: 30,
),
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: "Username or Email",
hintText: "you@yourmail.com",
),
),
TextFormField(
decoration: InputDecoration(
labelText: "Password",
hintText: "My strong Password",
),
obscureText: true,
)
],
),
),
_textbutton(context, islongpress: true)
],
),
),
),
),
);
}
}
Widget _textbutton(BuildContext context) {
return ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyHomePage(title: "Gulshan Yadav"),
),
);
},
child: Text(
"$task",
style: TextStyle(fontWeight: FontWeight.bold),
),
);
}
Ohh, I got that illustration from a site named undraw.
As you can see inside our code, there's something named safe area, what's that?
It's a widget that inserts its child with enough padding to avoid intrusions by the operating system.
For example, this will indent the child by enough to avoid the status bar at the top of the screen.
It will also indent the child by the amount necessary to avoid The Notch on the screen, or other similar creative physical features of the display.
I want you to read this page to know how to choose the shade of color for your application to look materialistic.
It will help you in choosing the right color for your design.
We're done, hope you liked this article. If you have any doubt, please don't be shy to ask in our Telegram group.
Stay home, stay safe.
Cya :)