Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

converting a statelesswidget into statefulwidget or coding a checkbox in a statelesswidget

I want to use a checkbox for checking, if the user is an admin or a normal user.
I already tried to do a statefulwidget out of my statelesswidget, but it won’t work at all.

How can I convert my authentification page into a statefulwidget?

The code for my checkbox would be:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

                 Checkbox(
                          value: checkBoxValue,
                          onChanged: (bool value){
                            setState(() => checkBoxValue = value);
                      }),
                      Text("Admin",)
                    ],
                  ),

The problem is that "setState" isn’t defined for a statelesswidget, so I need to convert my authentification page into a statefulwidge.
But how can I do this? I have already tried it a few times, but I always get a lot of errors.

Or is there maybe an other way to code the checkbox with using a statelesswidget?

authentication.dart code:

import 'package:bestfitnesstrackereu/pages/home/home_view.dart';
import 'package:bestfitnesstrackereu/routing/route_names.dart';
import 'package:flutter/material.dart';

class AuthenticationPage extends StatelessWidget {
  const AuthenticationPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool checkBoxValue = false;
    return Scaffold(
      body: Center(
        child: Container(
          constraints: BoxConstraints(maxWidth: 400),
          padding: EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                children: [
                  Padding(
                    padding: EdgeInsets.only(right: 12),
                    child: Image.asset("assets/logo.png"),
                  ),
                  Expanded(child: Container()),
                ],
              ),

              SizedBox(
                height: 30,
              ),
              
              Row(
                children: [
                  Text("Login",
                    style: TextStyle(
                    fontSize: 30, fontWeight: FontWeight.bold
                  )),
                ],
              ),

              SizedBox(height: 10,),

              Row(
                children: [
                  Text(
                    "Welcome back to the admin panel",
                    style: TextStyle(
                    color: Colors.grey,))
                ],
              ),

              SizedBox(height: 15,),

              TextField(
                decoration: InputDecoration(
                  labelText: "E-Mail",
                  hintText: "abc@domain.com",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20)
                  )
                ),
              ),

              SizedBox(height: 15,),

              TextField(
                obscureText: true,
                decoration: InputDecoration(
                    labelText: "Password",
                    hintText: "123",
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(20)
                    )
                ),
              ),

              SizedBox(height: 15,),

              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Checkbox(
                          value: checkBoxValue,
                          onChanged: (bool value){
                            setState(() => checkBoxValue = value);
                      }),
                      Text("Admin",)
                    ],
                  ),

                  Text(
                    "Forgot password",
                    style: TextStyle(
                      color: Colors.white,
                  ))
                ],
              ),

              SizedBox(height: 15,),

              InkWell(
                onTap: (){
                  Navigator.of(context).pushNamed(HomeRoute);
                },
                child: Container(
                  decoration: BoxDecoration(color: Colors.grey,
                  borderRadius: BorderRadius.circular(20)),
                  alignment: Alignment.center,
                  width: double.maxFinite,
                  padding: EdgeInsets.symmetric(vertical: 16),
                  child: Text(
                    "Login",
                    style: TextStyle(
                    color: Colors.black,
                  ),)
              )
              ),

              SizedBox(height: 15,),

              InkWell(
                  onTap: (){
                    Navigator.of(context).pushNamed(HomeRoute);
                  },
                  child: Container(
                      decoration: BoxDecoration(color: Colors.grey,
                          borderRadius: BorderRadius.circular(20)),
                      alignment: Alignment.center,
                      width: double.maxFinite,
                      padding: EdgeInsets.symmetric(vertical: 16),
                      child: Text(
                        "Teilnehmer werden",
                        style: TextStyle(
                          color: Colors.black,
                        ),)
                  )
              ),

              RichText(text: TextSpan(
                  children: [
                    TextSpan(text: "Do not have admin credentials?\n"),
                    TextSpan(text: "Request credentials!", style: TextStyle(color: Colors.black))
                  ]
              ))
            ],
          ),
        )
      ),
    );
  }
}

>Solution :

Depending on the IDE you are using, when you hover on the widget class name, there is a light bulb that show on the left side in the editor. When you click on the light bulb, there is an option to convert to a stateless widget.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading