将无状态小部件转换为有状态小部件或在无状态小部件中编写复选框

Question

我想使用复选框来检查用户是管理员还是普通用户。我已经尝试从我的 statelesswidget 中创建一个 statefulwidget，但它根本不起作用。

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

我的复选框的代码是：

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

问题是“setState”没有为无状态小部件定义，因此我需要将我的身份验证页面转换为有状态小部件。但是我该怎么做呢？我已经试过几次了，但总是报错。

或者是否有其他方法可以使用无状态小部件对复选框进行编码？

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，当您将鼠标悬停在小部件 class 名称上时，编辑器左侧会显示一个灯泡。当您点击灯泡时，有一个选项可以转换为无状态小部件。

将无状态小部件转换为有状态小部件或在无状态小部件中编写复选框

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

flutter

dart