boolean value to switch between pages using flutter
Posted By : Saurabh Singh | 30-Aug-2022
About flutter:
Flutter is an open-source UI software development kit that is built and developed by Google. It is used to construct cross-platform applications from a single codebase for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web. First described in 2015, Flutter was released in May 2017.
What is boolean in Flutter ?
The Boolean is a logical data type that can have only the values “TRUE” or “FALSE”. Mostly we take boolean value as condition opeartion to excaute method (it used in nested condition ).First thing to start using bool is declaring it. It is okay to give it a default value or leave it empty, condition will be checked later and variable will get a proper value:
bool isLoading;
or
bool isLoading = false;
Table of content:
1)Creating Project in Flutter
2)Code Implementation
1)Creating Project in Flutter
1.1) open android studio and click on file > new >new flutter project
After that you need to provide some basic details about your project like project name, description organization, etc then hit the finish button. It will create a new project in Flutter.
2)Code Implementation
2.1)create a dart file with statefullstate in lib folder with name loginView.dart
class LoginView extends StatefulWidget {
const LoginView({Key? key}) : super(key: key);
@override
State<LoginView> createState() => _LoginViewState();
}
class _LoginViewState extends State<LoginView> {
@override
Widget build(BuildContext context) {
return Scaffold(
);
}
}
2.1) logic code for boolean to change screen
bool islogin = true; _changeScreen() {
setState(() { // sets it to the opposite of the current screen
islogin = !islogin; print(islogin);
});
}
2.3)code for login view
Column(
children: [
Stack(
children: [
Stack(
children: [
Container(
height: 250,
width: Get.width,
decoration: const BoxDecoration(
color: kPrimaryGreenColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
),
Positioned(
child: Center(
child: Container(
child: Column(
children: [
Image.asset(
"assets/logo/company.png",
height: 110,
width: 138,
),
Text(
"StoreBridge",
style: kBody20black600.copyWith(
color: kwhitecolor),
textAlign: TextAlign.center,
),
],
)),
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 150, left: 16, right: 16),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: kwhitecolor,
borderRadius: BorderRadius.circular(10),
),
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap:(){
print("object");
_changeScreen();
},
child: const Text(
"Sign In",
style: TextStyle(
color: kblack,
decoration:
TextDecoration.underline,
),
),
),
Spacer(),
GestureDetector(
onTap:(){
print("object");
_changeScreen();
},
child: const Text(
"Register",
style: TextStyle(
color: kblack,
),
),
),
],
),
),
const Padding(
padding: const EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Email-Id"),
),
const CustomTextField(),
const Padding(
padding:
EdgeInsets.only(top: 20, bottom: 8),
child: Text("Password"),
),
const CustomTextField(),
Center(
child: GestureDetector(
child: const Padding(
padding: EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Forget Password"),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16),
child: RoundedLoadingButton(
width: Get.width,
color: kPrimaryGreenColor,
successColor: kgreencolor,
loaderSize: 30,
loaderStrokeWidth: 2,
controller:
authController.btnController.value,
onPressed: () =>
authController.loginVerification(),
valueColor: kwhitecolor,
borderRadius: 4,
curve: Curves.easeInOutCirc,
resetDuration:
const Duration(seconds: 15),
resetAfterDuration: false,
child: const Text("LOG IN",
style:
TextStyle(color: Colors.white)),
),
),
const Divider(
thickness: 2,
),
Center(
child: GestureDetector(
child: const Padding(
padding: EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Or sign in with"),
),
),
),
const Divider(
thickness: 2,
),
Padding(
padding:
EdgeInsets.only(top: 20, bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: kPrimaryGreenColor),
borderRadius:
BorderRadius.circular(10),
),
child: const Text("Google"),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: kPrimaryGreenColor),
borderRadius:
BorderRadius.circular(10),
),
child: const Text("facebook"),
),
],
),
)
],
),
)),
),
],
),
SizedBox(
height: 250,
child: Align(
alignment: FractionalOffset.bottomCenter,
child: CustomPaint(
size: Size(400, 800),
painter: CurvedPainter(),
),
),
),
],
)
2.4) code for register views
Column(
children: [
Stack(
children: [
Stack(
children: [
Container(
height: 250,
width: Get.width,
decoration: const BoxDecoration(
color: kPrimaryGreenColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
),
Positioned(
child: Center(
child: Container(
// height: 110,
// width: 138,
child: Column(
children: [
Image.asset(
"assets/logo/company.png",
height: 110,
width: 138,
),
Text(
"StoreBridge",
style: kBody20black600.copyWith(
color: kwhitecolor),
textAlign: TextAlign.center,
),
],
)),
),
)
],
),
Padding(
padding: const EdgeInsets.only(
top: 150, left: 16, right: 16),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: kwhitecolor,
borderRadius: BorderRadius.circular(10),
),
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {
print("object");
_changeScreen();
},
child: const Text(
"Sign In",
style: TextStyle(
color: kblack,
),
),
),
Spacer(),
GestureDetector(
onTap: (){
_changeScreen();
},
child: const Text(
"Register",
style: TextStyle(
color: kblack,
decoration:
TextDecoration.underline,
),
),
),
],
),
),
const Padding(
padding:
EdgeInsets.only(top: 20, bottom: 8),
child: Text("User Name"),
),
CustomTextField(
controller: authController.userName.value,
),
const Padding(
padding: const EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Email-Id"),
),
CustomTextField(
controller: authController.email.value,
),
const Padding(
padding:
EdgeInsets.only(top: 20, bottom: 8),
child: Text("Password"),
),
CustomTextField(
controller: authController.password.value,
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 8),
child: RoundedLoadingButton(
width: Get.width,
color: kPrimaryGreenColor,
successColor: kgreencolor,
loaderSize: 30,
loaderStrokeWidth: 2,
controller:
authController.btnController.value,
onPressed: () =>
authController.loginVerification(),
valueColor: kwhitecolor,
borderRadius: 4,
curve: Curves.easeInOutCirc,
resetDuration:
const Duration(seconds: 15),
resetAfterDuration: false,
child: const Text("Register",
style:
TextStyle(color: Colors.white)),
),
),
],
),
)),
),
],
),
Align(
alignment: FractionalOffset.bottomCenter,
child: CustomPaint(
size: Size(400, 400),
painter: CurvedPainter(),
),
),
],
),
2.5) final code for loginView.dart
class LoginView extends StatefulWidget {
const LoginView({Key? key}) : super(key: key);
@override
State<LoginView> createState() => _LoginViewState();
}
class _LoginViewState extends State<LoginView> {
/// you can call your own api method to get login or register user.
final authController = Get.put(AuthenicationController());
bool islogin = true;
_changeScreen() {
setState(() {
// sets it to the opposite of the current screen
islogin = !islogin;
print(islogin);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: islogin
? Column(
children: [
Stack(
children: [
Stack(
children: [
Container(
height: 250,
width: Get.width,
decoration: const BoxDecoration(
color: kPrimaryGreenColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
),
Positioned(
child: Center(
child: Container(
child: Column(
children: [
Image.asset(
"assets/logo/company.png",
height: 110,
width: 138,
),
Text(
"StoreBridge",
style: kBody20black600.copyWith(
color: kwhitecolor),
textAlign: TextAlign.center,
),
],
)),
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 150, left: 16, right: 16),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: kwhitecolor,
borderRadius: BorderRadius.circular(10),
),
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap:(){
print("object");
_changeScreen();
},
child: const Text(
"Sign In",
style: TextStyle(
color: kblack,
decoration:
TextDecoration.underline,
),
),
),
Spacer(),
GestureDetector(
onTap:(){
print("object");
_changeScreen();
},
child: const Text(
"Register",
style: TextStyle(
color: kblack,
),
),
),
],
),
),
const Padding(
padding: const EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Email-Id"),
),
const CustomTextField(),
const Padding(
padding:
EdgeInsets.only(top: 20, bottom: 8),
child: Text("Password"),
),
const CustomTextField(),
Center(
child: GestureDetector(
child: const Padding(
padding: EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Forget Password"),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16),
child: RoundedLoadingButton(
width: Get.width,
color: kPrimaryGreenColor,
successColor: kgreencolor,
loaderSize: 30,
loaderStrokeWidth: 2,
controller:
authController.btnController.value,
onPressed: () =>
authController.loginVerification(),
valueColor: kwhitecolor,
borderRadius: 4,
curve: Curves.easeInOutCirc,
resetDuration:
const Duration(seconds: 15),
resetAfterDuration: false,
child: const Text("LOG IN",
style:
TextStyle(color: Colors.white)),
),
),
const Divider(
thickness: 2,
),
Center(
child: GestureDetector(
child: const Padding(
padding: EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Or sign in with"),
),
),
),
const Divider(
thickness: 2,
),
Padding(
padding:
EdgeInsets.only(top: 20, bottom: 10),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: kPrimaryGreenColor),
borderRadius:
BorderRadius.circular(10),
),
child: const Text("Google"),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: kPrimaryGreenColor),
borderRadius:
BorderRadius.circular(10),
),
child: const Text("facebook"),
),
],
),
)
],
),
)),
),
],
),
SizedBox(
height: 250,
child: Align(
alignment: FractionalOffset.bottomCenter,
child: CustomPaint(
size: Size(400, 800),
painter: CurvedPainter(),
),
),
),
],
)
: Column(
children: [
Stack(
children: [
Stack(
children: [
Container(
height: 250,
width: Get.width,
decoration: const BoxDecoration(
color: kPrimaryGreenColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
),
Positioned(
child: Center(
child: Container(
// height: 110,
// width: 138,
child: Column(
children: [
Image.asset(
"assets/logo/company.png",
height: 110,
width: 138,
),
Text(
"StoreBridge",
style: kBody20black600.copyWith(
color: kwhitecolor),
textAlign: TextAlign.center,
),
],
)),
),
)
],
),
Padding(
padding: const EdgeInsets.only(
top: 150, left: 16, right: 16),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
color: kwhitecolor,
borderRadius: BorderRadius.circular(10),
),
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
GestureDetector(
onTap: () {
print("object");
_changeScreen();
},
child: const Text(
"Sign In",
style: TextStyle(
color: kblack,
),
),
),
Spacer(),
GestureDetector(
onTap: (){
_changeScreen();
},
child: const Text(
"Register",
style: TextStyle(
color: kblack,
decoration:
TextDecoration.underline,
),
),
),
],
),
),
const Padding(
padding:
EdgeInsets.only(top: 20, bottom: 8),
child: Text("User Name"),
),
CustomTextField(
controller: authController.userName.value,
),
const Padding(
padding: const EdgeInsets.only(
top: 20, bottom: 8),
child: Text("Email-Id"),
),
CustomTextField(
controller: authController.email.value,
),
const Padding(
padding:
EdgeInsets.only(top: 20, bottom: 8),
child: Text("Password"),
),
CustomTextField(
controller: authController.password.value,
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 8),
child: RoundedLoadingButton(
width: Get.width,
color: kPrimaryGreenColor,
successColor: kgreencolor,
loaderSize: 30,
loaderStrokeWidth: 2,
controller:
authController.btnController.value,
onPressed: () =>
authController.loginVerification(),
valueColor: kwhitecolor,
borderRadius: 4,
curve: Curves.easeInOutCirc,
resetDuration:
const Duration(seconds: 15),
resetAfterDuration: false,
child: const Text("Register",
style:
TextStyle(color: Colors.white)),
),
),
],
),
)),
),
],
),
Align(
alignment: FractionalOffset.bottomCenter,
child: CustomPaint(
size: Size(400, 400),
painter: CurvedPainter(),
),
),
],
),
),
),
);
}
}
/// we are using custom paint to create beautiful ui
code for creating custom shape in flutter
class CurvedPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.teal
..strokeWidth = 15;
var path = Path();
path.moveTo(0, size.height * 0.7);
path.quadraticBezierTo(size.width * 0.25, size.height * 0.7,
size.width * 0.5, size.height * 0.8);
path.quadraticBezierTo(size.width * 0.75, size.height * 0.9,
size.width * 1.0, size.height * 0.8);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Saurabh Singh
Saurabh is working as a Mobile Application Developer with an overall 2+ years of experience. His areas of expertise are Flutter and Android Development. He is a detail-oriented person with good problem-solving skills.