CODEWITHSUNDEEP
flutterflutter-layout
Prashant Mishra
Prashant Mishra

Reputation: 319

Flutter Textfield responsive font

I am trying to work with media queries and was experimenting with textfield widget. To style a container I tried box decoration and stuff to add shadow properties and also the media query size to add responsiveness in different devices. Is there a way to make icon size and font size responsive because in smaller devices the texfield sort of lowers displaces itself and looks abnormal.

Here is my code:

    Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Colors.blue[50],
      body: Center(
        child: Padding(
          padding: const EdgeInsets.only(left: 20, right: 20),
          child: Container(
            height: MediaQuery.of(context).size.height * 0.065,
            decoration: BoxDecoration(
                color: Colors.blue[50],
                borderRadius: BorderRadius.circular(6.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white,
                    spreadRadius: 1,
                    blurRadius: 2,
                    offset: Offset(2, 2),
                  ),
                  BoxShadow(
                    color: Hexcolor('#C5D6F2'),
                    spreadRadius: 1,
                    blurRadius: 2,
                    offset: Offset(-2, -2),
                  ),
                ]),
            child: Center(
              child: TextField(
                decoration: InputDecoration(
                  hintText: 'Email',
                  hintStyle: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.normal,
                    color: Hexcolor('#9fa6b4'),
                  ),
                  border: InputBorder.none,
                  prefixIcon: Icon(
                    Icons.mail,
                    color: Hexcolor('#9fa6b4'),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ));
  }

And here is my output:enter image description here

Upvotes: 0

Views: 231

Answers (1)

Rod
Rod

Reputation: 1651

Yes! Use the size property. I use a function to retrieve the size.

The icon widget:

Icon(
  Icons.forward,
  color: Theme.of(context).primaryColor,
  size: iconSize(context),
),

The function with my constants(which I share with all icons):

const double smallScreenWidth = 360.0;
const double mediumScreenWidth = 412.0;
const double bigScreenWidth = 480.0;

double iconSize(BuildContext context) {
  double screenWidth = 1;

  if (MediaQuery.of(context).orientation == Orientation.portrait)
    screenWidth = MediaQuery.of(context).size.width;
  else
    screenWidth = MediaQuery.of(context).size.height;

  if (screenWidth <= smallScreenWidth)
    return 32.0;
  else if (screenWidth <= mediumScreenWidth)
    return 40.0;
  else
    return 48.0;
}

Upvotes: 2

Related Questions