Home > Back-end >  Error: Not a constant expression and how to change the default blue color paste/select option?
Error: Not a constant expression and how to change the default blue color paste/select option?

Time:07-05

I got these errors on terminal

Launching lib\main.dart on sdk gphone64 x86 64 in debug mode...
Running Gradle task 'assembleDebug'...
lib/pages/sign_up.dart:84:34: Error: Not a constant expression.
                    obscureText: isHiddenPassword,
                                 ^^^^^^^^^^^^^^^^
lib/pages/sign_up.dart:88:32: Error: Not a constant expression.
                        onTap: _togglePasswordView,
                               ^^^^^^^^^^^^^^^^^^^
lib/pages/sign_up.dart:23:23: Error: Constant evaluation error:
            children: const [
                      ^
lib/pages/sign_up.dart:84:34: Context: Not a constant expression.
                    obscureText: isHiddenPassword,
                             ^

I followed a tutorial about hide password's user, thanks to visibility icon, but it doesn't work the eye icon it doesn't closed when I click on it, how to click on the icon and close the eye?

Also, how to change icon.visibility to gray color, this little blue circle that I show you in the image, I want to change to gray color too, when it shows "paste"

there:

enter image description here

Blue dots color:

enter image description here

This is my code:

import 'package:flutter/material.dart';

class test extends StatefulWidget {
  const test({Key? key}) : super(key: key);

  @override
  State<test> createState() => _testState();
}

class _testState extends State<test> {
  bool isHiddenPassword = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: const [
              Center(
                child: Text(
                  "Enter email",
                  style: TextStyle(
                    fontSize: 20,
                    fontStyle: FontStyle.normal,
                    fontWeight: FontWeight.normal,
                    color: Color(0xff3B3B3B),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Center(
                child: SizedBox(
                  width: 350,
                  child: TextField(
                    cursorColor: Color(0xff3B3B3B),
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 20,
                      decoration: TextDecoration.none,
                      decorationStyle: TextDecorationStyle.dotted,
                      decorationColor: Color(0xffF6F6F6),
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 110,
              ),
              Center(
                child: Text(
                  "Enter password",
                  style: TextStyle(
                    fontSize: 20,
                    fontStyle: FontStyle.normal,
                    fontWeight: FontWeight.normal,
                    color: Color(0xff3B3B3B),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Center(
                child: SizedBox(
                  width: 350,
                  child: TextField(
                    obscureText: isHiddenPassword,
                    cursorColor: Color(0xff3B3B3B),
                    decoration: InputDecoration(
                      suffixIcon: InkWell(
                        onTap: _togglePasswordView,
                        child: Icon(
                            Icons.visibility),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 20,
                      decoration: TextDecoration.none,
                      decorationStyle: TextDecorationStyle.dotted,
                      decorationColor: Color(0xffF6F6F6),
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 110,
              ),
              Center(
                child: Icon(
                  Icons.arrow_forward,
                  size: 40,
                  color: Color(0xff7E7E7E),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
  void _togglePasswordView(){
    setState(() {
      isHiddenPassword = !isHiddenPassword;
    });
  }
}

CodePudding user response:

Also remove const from Column's children: [ .

You can use isHiddenPassword to change between icons. And play with color parameter on icon color: Colors.grey,

child: isHiddenPassword
    ? Icon(
        Icons.visibility_off,
      )
    : Icon(
        Icons.visibility,
        color: Colors.grey,
      ),

To change selection color, you can provide themedata on MaterialApp. or wrap top level widget with TextSelectionTheme

child: TextSelectionTheme(
  data: TextSelectionTheme.of(context).copyWith(
    selectionColor: Colors.grey,
    cursorColor: Colors.green,
    selectionHandleColor: Colors.pink,
  ),
  child: TextField(

Full snippet

class test extends StatefulWidget {
  const test({Key? key}) : super(key: key);

  @override
  State<test> createState() => _testState();
}

class _testState extends State<test> {
  bool isHiddenPassword = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: TextSelectionTheme(
        data: TextSelectionTheme.of(context).copyWith(
          selectionColor: Colors.grey,
          cursorColor: Colors.green,
          selectionHandleColor: Colors.pink,
        ),
        child: Center(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                const Center(
                  child: Text(
                    "Enter email",
                    style: TextStyle(
                      fontSize: 20,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                const Center(
                  child: SizedBox(
                    width: 350,
                    child: TextField(
                      cursorColor: Color(0xff3B3B3B),
                      decoration: InputDecoration(
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffD7D7D7)),
                        ),
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffD7D7D7)),
                        ),
                      ),
                      style: TextStyle(
                        fontSize: 20,
                        decoration: TextDecoration.none,
                        decorationStyle: TextDecorationStyle.dotted,
                        decorationColor: Color(0xffF6F6F6),
                        fontStyle: FontStyle.normal,
                        fontWeight: FontWeight.normal,
                        color: Color(0xff3B3B3B),
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 110,
                ),
                const Center(
                  child: Text(
                    "Enter password",
                    style: TextStyle(
                      fontSize: 20,
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                Center(
                  child: SizedBox(
                    width: 350,
                    child: TextField(
                      obscureText: isHiddenPassword,
                      cursorColor: const Color(0xff3B3B3B),
                      decoration: InputDecoration(
                        suffixIcon: InkWell(
                          onTap: _togglePasswordView,
                          child: isHiddenPassword
                              ? Icon(
                                  Icons.visibility_off,
                                  color: Colors.grey,
                                )
                              : Icon(
                                  Icons.visibility,
                                  color: Colors.grey,
                                ),
                        ),
                        enabledBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffD7D7D7)),
                        ),
                        focusedBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffD7D7D7)),
                        ),
                      ),
                      style: const TextStyle(
                        fontSize: 20,
                        decoration: TextDecoration.none,
                        decorationStyle: TextDecorationStyle.dotted,
                        decorationColor: Color(0xffF6F6F6),
                        fontStyle: FontStyle.normal,
                        fontWeight: FontWeight.normal,
                        color: Color(0xff3B3B3B),
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 110,
                ),
                const Center(
                  child: Icon(
                    Icons.arrow_forward,
                    size: 40,
                    color: Color(0xff7E7E7E),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _togglePasswordView() {
    setState(() {
      isHiddenPassword = !isHiddenPassword;
    });
  }
}

CodePudding user response:

You should remove const at line 23.

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children:  []
)

the second i doesnt have computer here but here is keyword for you: TextEdittingController, and TextSelection

CodePudding user response:

The constant error appears because you have declared your Column children to be constant, which they aren't. To fix your issue, remove the const in the children.

Column(
  children: [
    ...
  ]
)

To your second issue, if you want to toggle the Icon you have to display the Icon depending on isHiddenPassword.

Icon(
  isHiddenPassword? Icons.visibility_off : Icons.visibility
),
  • Related