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;
  }
}

 

 

 

 

 

 

About Author

Author Image
Saurabh Singh

Saurabh is working as a Mobile Application Developer with an overall 1+ years of experience. His areas of expertise are Flutter and Android Development. He is a detail-oriented person with good problem-solving skills.

Request for Proposal

Name is required

Comment is required

Sending message..