text field's are transparent two light are like making flash with that color in the top left and down right


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; // Needed for certain utilities

void main() {
  runApp(NetpcSpaceApp());
}

class NetpcSpaceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'netpc.space',
      debugShowCheckedModeBanner: false,
      home: LoginPage(),
      theme: CupertinoThemeData(
        primaryColor: Color(0xFFF497C8),
        scaffoldBackgroundColor: Color(0xFF090014),
      ),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool isRegister = false;

  // Controllers for text fields
  final TextEditingController loginController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  final TextEditingController usernameController = TextEditingController();

  // Function to handle form submission
  void handleSubmit() {
    if (isRegister) {
      // Handle registration API call
      String username = usernameController.text;
      String login = loginController.text;
      String password = passwordController.text;
      // TODO: Implement API call for registration
      print('Register: $username, $login, $password');
    } else {
      // Handle login API call
      String login = loginController.text;
      String password = passwordController.text;
      // TODO: Implement API call for login
      print('Login: $login, $password');
    }
  }

  @override
  Widget build(BuildContext context) {
    // Fixed dimensions as per specifications
    const double cardWidth = 734;
    const double cardHeight = 600;

    return CupertinoPageScaffold(
      backgroundColor: Color(0xFF090014),
      child: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            // Light Dots Positioned Outside the Card
            Positioned(
              top: (cardHeight * 0.1),
              left: (cardWidth * 0.2),
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  color: Color(0xFFF497C8),
                  shape: BoxShape.circle,
                ),
              ),
            ),
            Positioned(
              top: (cardHeight * 0.1),
              right: (cardWidth * 0.2),
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  color: Color(0xFFF497C8),
                  shape: BoxShape.circle,
                ),
              ),
            ),
            // Transparent Central Card
            Container(
              width: cardWidth,
              height: cardHeight,
              decoration: BoxDecoration(
                color: Colors.transparent, // Fully transparent
                borderRadius: BorderRadius.circular(16),
                border: Border.all(color: Colors.grey, width: 1),
              ),
              child: Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 80.0, vertical: 40.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    // Title Text
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'netpc.space',
                        style: TextStyle(
                          fontSize: 24,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    SizedBox(height: 40),
                    // Username Field (only in Register)
                    if (isRegister)
                      CupertinoTextFieldWidget(
                        controller: usernameController,
                        placeholder: 'Username',
                        prefix: Icon(CupertinoIcons.person, color: Colors.grey),
                      ),
                    if (isRegister) SizedBox(height: 20),
                    // Login Field
                    CupertinoTextFieldWidget(
                      controller: loginController,
                      placeholder: 'Login',
                      prefix: Icon(CupertinoIcons.mail, color: Colors.grey),
                    ),
                    SizedBox(height: 20),
                    // Password Field (always visible)
                    CupertinoTextFieldWidget(
                      controller: passwordController,
                      placeholder: 'Password',
                      prefix: Icon(CupertinoIcons.lock, color: Colors.grey),
                      obscureText: true,
                    ),
                    SizedBox(height: 40),
                    // Submit Button
                    SizedBox(
                      width: double.infinity,
                      height: 64,
                      child: CupertinoButton(
                        onPressed: handleSubmit,
                        color: Colors.transparent, // Transparent background
                        padding: EdgeInsets.zero,
                        borderRadius: BorderRadius.circular(16),
                        child: Container(
                          decoration: BoxDecoration(
                            border:
                                Border.all(color: Color(0xFFF497C8), width: 2),
                            borderRadius: BorderRadius.circular(16),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            isRegister ? 'Register' : 'Login',
                            style: TextStyle(
                              fontSize: 18,
                              color: Color(0xFFF497C8),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    // Register and Forgot Password Buttons
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // Register Button
                        CupertinoButton(
                          padding: EdgeInsets.zero,
                          onPressed: () {
                            setState(() {
                              isRegister = true;
                            });
                          },
                          child: Text(
                            'Register',
                            style: TextStyle(
                              color: Color(0xFFF497C8),
                              decoration: TextDecoration.underline,
                            ),
                          ),
                        ),
                        // Forgot Password Button
                        CupertinoButton(
                          padding: EdgeInsets.zero,
                          onPressed: () {
                            // Navigate to Forgot Password page or handle accordingly
                            print('Forgot Password tapped');
                          },
                          child: Text(
                            'Forgot Password?',
                            style: TextStyle(
                              color: Color(0xFFF497C8),
                              decoration: TextDecoration.underline,
                            ),
                          ),
                        ),
                      ],
                    ),
                    // If in Register mode, show an option to switch back to Login
                    if (isRegister) SizedBox(height: 10),
                    if (isRegister)
                      CupertinoButton(
                        padding: EdgeInsets.zero,
                        onPressed: () {
                          setState(() {
                            isRegister = false;
                          });
                        },
                        child: Text(
                          'Already have an account? Login',
                          style: TextStyle(
                            color: Color(0xFFF497C8),
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CupertinoTextFieldWidget extends StatelessWidget {
  final TextEditingController controller;
  final String placeholder;
  final Widget prefix;
  final bool obscureText;

  CupertinoTextFieldWidget({
    required this.controller,
    required this.placeholder,
    required this.prefix,
    this.obscureText = false,
  });

  @override
  Widget build(BuildContext context) {
    return CupertinoTextField(
      controller: controller,
      placeholder: placeholder,
      obscureText: obscureText,
      padding: EdgeInsets.symmetric(vertical: 16, horizontal: 12),
      prefix: prefix,
      decoration: BoxDecoration(
        color: Color(0xFF2C2C2C), // Dark field background with full opacity
        borderRadius: BorderRadius.circular(12),
      ),
      style: TextStyle(color: Colors.white),
      placeholderStyle: TextStyle(color: Colors.grey),
    );
  }
}