Flutter textField font disappear when its full

Viewed 286

I am using simple TextFormField but the issue is when I type something it's showing but space full fonts are disappeared from TextField.

                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(5),
                          bottomLeft: Radius.circular(5)),
                      child: Material(
                        shape: Border(
                          left: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          bottom: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          top: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                        ),
                        child: Container(
                          width: Width * 0.56,
                          height: Height * 0.07,
                          decoration: BoxDecoration(
                            color: Color(0xffFAFAFA),
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5),
                                bottomLeft: Radius.circular(5)),
                          ),
                          child: Center(
                              child: Text(
                            'https://www.app.stalkme.co/',
                            style: TextStyle(
                                color: textGreyColor, fontSize: 15, fontFamily: 'SegoeUI'),

                                
                          )),
                        ),
                      ),
                    ),
                    Container(
                      width: Width * 0.34,
                      height: Height * 0.07,
                      child: TextFormField(
                        controller: nfcUrl,
                        key: ValueKey('name'),
                        style: TextStyle(color: textGreyColor, fontFamily:'SegoeUI'),
                        decoration: new InputDecoration(
                          enabledBorder: new OutlineInputBorder(
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(5),
                                bottomRight: Radius.circular(5)),
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                          ),
                          filled: true,
                          hintStyle: new TextStyle(
                              color: textGreyColor, fontSize: 15, fontFamily: 'SegoeUI'),
                          fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(5),
                                bottomRight: Radius.circular(5)),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

It's happening only on the android device it's very strange that it's not causing any issue in my ios simulator but when I make a build or test on android device my font is disappeared after TextFormField fill and don't have space enter image description here

2 Answers

For the text of the TextField to appear normally it needs his normal height, But if you give it less height than it need to show the text this happen(if set height: Height * 0.09 or higher your problem will be solved).

To reduce the height of the TextField you can change the property contentPadding or set the isDense to true

TextFormField(
  decoration: InputDecoration(
    isDense: true,
    //contentPadding: EdgeInsets.all(0), //or any padding
    ) ...

Tested the code your post by wrapping the second Container with Expanded. Seems fine from my side.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Container(
          width: size.width,
          height: size.height,
          child: SingleChildScrollView(
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(5),
                          bottomLeft: Radius.circular(5)),
                      child: Material(
                        shape: Border(
                          left: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          bottom: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          top: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                        ),
                        child: Container(
                          width: Width * 0.56,
                          height:  Height * 0.07,
                          decoration: BoxDecoration(
                            color: Color(0xffFAFAFA),
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5),
                                bottomLeft: Radius.circular(5)),
                          ),
                          child: Center(
                              child: Text(
                                'https://www.app.stalkme.co/',
                                style: TextStyle(
                                    color: Colors.grey, fontSize: 15, fontFamily: 'SegoeUI'),


                              )),
                        ),
                      ),
                    ),
                    Expanded(
                      child:Container(
                        width: Width * 0.34,
                        height: Height * 0.07,
                        child: TextFormField(
                          controller: nfcUrl,
                          key: ValueKey('name'),
                          style: TextStyle(color: Colors.grey, fontFamily:'SegoeUI'),
                          decoration: new InputDecoration(
                            enabledBorder: new OutlineInputBorder(
                              borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(5),
                                  bottomRight: Radius.circular(5)),
                              borderSide: const BorderSide(
                                  color: Color(0xffE6E6E6), width: 1),
                            ),
                            filled: true,
                            hintStyle: new TextStyle(
                                color: Colors.grey, fontSize: 15, fontFamily: 'SegoeUI'),
                            fillColor: Colors.white,
                            focusedBorder: OutlineInputBorder(
                              borderSide: const BorderSide(
                                  color: Color(0xffE6E6E6), width: 1),
                              borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(5),
                                  bottomRight: Radius.circular(5)),
                            ),
                          ),
                        ),
                      ),
                    ),

                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Related