Блог

Я создаю поле номера мобильного телефона, я хочу скрыть границу справа при выборе набора и скрыть границу слева в поле номера.

 border: OutlineInputBorder(  borderSide: BorderSide(  width: 1,  color: Color(0xFFF2F2F7),  )  ),  

Вы должны настроить, обычно я использую Container() виджет для этой ситуации, обернуть TextField() Container() и украсить так, как вы хотите.

 class Homepage extends StatefulWidget {  const Homepage({Key key}) : super(key: key);   @override  _HomepageState createState() =gt; _HomepageState(); }  class _HomepageState extends Statelt;Homepagegt; {  @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: const Text('Homepage'),  backgroundColor: Colors.green,  ),  body: Container(  alignment: Alignment.center,  padding: const EdgeInsets.all(20),  child:Row(  children: [  Container(  padding: const EdgeInsets.only(right:10),  alignment: Alignment.centerRight,  height: 58.9,  width: 80,  decoration: BoxDecoration(  border: Border(  top: BorderSide(width: 1.0, color: Colors.black26),  left: BorderSide(width: 1.0, color: Colors.black26),  bottom: BorderSide(width: 1.0, color: Colors.black26),  ),  ),  child: Icon(Icons.arrow_drop_down),  ),  Expanded(  child: Container(  decoration: BoxDecoration(  border: Border(  top: BorderSide(width: 1.0, color: Colors.black26),  right: BorderSide(width: 1.0, color: Colors.black26),  bottom: BorderSide(width: 1.0, color: Colors.black26),  ),  ),  child: TextField(  decoration: InputDecoration(  hintText: "Phone number",  focusedBorder: InputBorder.none,  enabledBorder: InputBorder.none,  errorBorder: InputBorder.none,  disabledBorder: InputBorder.none,  border: OutlineInputBorder(  borderSide: BorderSide.none    )  )  ,  ),  ),  )    ],  )   ));  } }   

or

  class Homepage extends StatefulWidget {  const Homepage({Key key}) : super(key: key);   @override  _HomepageState createState() =gt; _HomepageState(); }  class _HomepageState extends Statelt;Homepagegt; {  @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: const Text('Homepage'),  backgroundColor: Colors.green,  ),  body: Container(  alignment: Alignment.center,  padding: const EdgeInsets.all(20),  child:   Container(  height: 55,  decoration: BoxDecoration(  border: Border.all(color:Colors.black26 )  ),  child: Row(  children: [  Container(  padding: const EdgeInsets.only(right:10),  alignment: Alignment.centerRight,  width: 80,  child: Icon(Icons.arrow_drop_down),  ),  Expanded(  child: TextField(  decoration: InputDecoration(  hintText: "Phone number",  focusedBorder: InputBorder.none,  enabledBorder: InputBorder.none,  errorBorder: InputBorder.none,  disabledBorder: InputBorder.none,  border: OutlineInputBorder(  borderSide: BorderSide.none    )  )  ,  )  )    ],  ),  )   ));  } }  

Или используйте префикс текстового поля:

  class Homepage extends StatefulWidget {  const Homepage({Key? key}) : super(key: key);   @override  _HomepageState createState() =gt; _HomepageState(); }  class _HomepageState extends Statelt;Homepagegt; {    @override  Widget build(BuildContext context) {  return Scaffold(  appBar: AppBar(  title: const Text('Homepage'),  backgroundColor: Colors.green,  ),  body: Container(  alignment: Alignment.center,  padding: const EdgeInsets.all(20),  child: SingleChildScrollView(  child: Column(  mainAxisAlignment: MainAxisAlignment.center,  children: [  TextFormField(  decoration: InputDecoration(  prefixIcon: Container(  padding: const EdgeInsets.only(right: 10, left: 10),  alignment: Alignment.centerRight,  height: 55,  width: 80,  child: const Icon(Icons.arrow_drop_down)  ),    hintText: "Phone number",  errorText: "Password should contain more than 5 characters",  border:  const OutlineInputBorder(borderSide: BorderSide(color:Colors.black26 ))),  onChanged: (val) {},    ),   const SizedBox(height:20),   TextFormField(  decoration: InputDecoration(  prefixIcon: Container(  padding: const EdgeInsets.only(right: 10, left: 10),  alignment: Alignment.centerRight,  height: 55,  width: 80,  child: const Icon(Icons.person)  ),    hintText: "Name",    border:  const OutlineInputBorder(borderSide: BorderSide(color:Colors.black26 ))),  onChanged: (val) {},    ),  ],  ),  )    ));  } }