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

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:

                 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: "[email protected]",
                  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))
                  ]
              ))
            ],
          ),
        )
      ),
    );
  }
}

CodePudding user response：

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.