将statelesswidget转换为statelesswidget或在statelesswidget中编写复选框

Question

如果用户是管理员还是普通用户，我想使用复选框进行检查。我已经尝试过从我的statelesswidget中执行一个状态小部件，但是它根本无法工作。

如何将身份验证页面转换为状态小部件？

我的复选框的代码是：

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

问题是"setState“不是为statelesswidget定义的，所以我需要将我的身份验证页面转换为状态宽度。但我该怎么做呢？我已经试过几次了，但我总是会犯很多错误。

或者，是否有其他方式使用statelesswidget对复选框进行编码？

authentication.dart代码：

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))
                  ]
              ))
            ],
          ),
        )
      ),
    );
  }
}

Answer 1

根据您使用的IDE，当您在小部件类名上悬停时，编辑器左侧会显示一个灯泡。当您单击灯泡时，有一个转换为无状态小部件的选项。