I have this widget and many other “component widgets” ,like custom textfields,buttons etc .

// ignore_for_file: camel_case_types
import 'package:flutter/material.dart';
//Libs
import 'package:google_fonts/google_fonts.dart';

class Custom_TextField extends StatelessWidget {
  final TextEditingController themeController;
  final String labelTexts;
  final IconData? icon;
  final bool? havePassword;
  final List<String>? autofillHints;

  Custom_TextField({
    super.key,
    required this.themeController,
    required this.labelTexts,
    this.havePassword,
    required this.icon,
    this.autofillHints,
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final custom_textField_sizes =
        Custom_TextField_Sizes.fromScreenWidth(screenWidth);

    return Container(
      width: custom_textField_sizes.width,
      height: custom_textField_sizes.height,
      child: TextField(
        obscureText: havePassword!,
        decoration: InputDecoration(
          //floatingLabelBehavior: FloatingLabelBehavior.always,
          labelText: labelTexts,
          labelStyle: TextStyle(
            color: Colors.white70,
            fontFamily: GoogleFonts.akatab().fontFamily,
            fontSize: custom_textField_sizes.fontSize1,
          ),
          // hintText: '............',
          // hintStyle: TextStyle(
          //   color: Colors.white70,
          //   fontFamily: GoogleFonts.akatab().fontFamily,
          //   fontSize: custom_textField_sizes.fontSize1,
          // ),
          icon: Icon(icon,
              color: Colors.white70, size: custom_textField_sizes.icon),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.white70,
                width: custom_textField_sizes.borderSide),
            borderRadius: BorderRadius.all(
              Radius.circular(custom_textField_sizes.borderRadius),
            ),
          ),
          contentPadding: EdgeInsets.symmetric(
              vertical: custom_textField_sizes.content_vertical_padding,
              horizontal: custom_textField_sizes.content_horizontal_padding),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.white70,
                width: custom_textField_sizes.borderSide),
            borderRadius: BorderRadius.all(
              Radius.circular(custom_textField_sizes.borderRadius),
            ),
          ),
        ),
        style: TextStyle(
            color: Colors.white70, fontSize: custom_textField_sizes.fontSize2),
        controller: themeController,
        autofillHints: autofillHints,
      ),
    );
  }
}

class Custom_TextField_Sizes {
  final double width;
  final double height;
  final double fontSize1;
  final double borderRadius;
  final double content_vertical_padding;
  final double content_horizontal_padding;
  final double icon;
  final double borderSide;
  final double fontSize2;
  Custom_TextField_Sizes({
    required this.width,
    required this.height,
    required this.fontSize1,
    required this.borderRadius,
    required this.content_vertical_padding,
    required this.content_horizontal_padding,
    required this.icon,
    required this.borderSide,
    required this.fontSize2,
  });

  factory Custom_TextField_Sizes.fromScreenWidth(double screenWidth) {
    if (screenWidth < 480) {
      return Custom_TextField_Sizes(
          width: 400.0,
          height: 60.0,
          fontSize1: 16,
          borderRadius: 5,
          content_vertical_padding: 20,
          content_horizontal_padding: 15,
          icon: 35.0,
          borderSide: 1.0,
          fontSize2: 16);
    } else if (screenWidth <= 1280) {
      return Custom_TextField_Sizes(
          width: 700.0,
          height: 80.0,
          fontSize1: 20,
          borderRadius: 8,
          content_vertical_padding: 80,
          content_horizontal_padding: 15,
          icon: 45.0,
          borderSide: 2.0,
          fontSize2: 20);
    } else {
      return Custom_TextField_Sizes(
          width: 900.0,
          height: 150.0,
          fontSize1: 45,
          borderRadius: 12,
          content_vertical_padding: 100,
          content_horizontal_padding: 20,
          icon: 55,
          borderSide: 3.0,
          fontSize2: 30);
    }
  }
}

I want to make it responsive but im kinda confused of how to do it.Many articles says that this method is wrong .

I guess i must remove the media query and put layoutbuilder but how i will do it ? Do i need to do 2 seperate widgets or 3 depend of how many screen widths i want ?

If for example i take as a feedback from the layoutbuilder and the contraints are width :100 height 50 , how i will know what screen its for a mobile or a tablet ?

Thanks in Advance .