Как установить высоту FormTextField при наличии префикса Icon - PullRequest
Новая
       9

Как установить высоту FormTextField при наличии префикса Icon

0 голосов
/ 12 мая 2019

Я использую следующий код для генерации TextFormField, который я могу изменить высоту, изменив вертикальное заполнение текстового поля. 

final hotelSearchField = TextFormField(
  keyboardType: TextInputType.text,
  focusNode: _hotelSearchFocus,
  controller: _hotelSearchController,
  textInputAction: TextInputAction.search,
  onFieldSubmitted: (term) {},
  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(vertical: 7.0, horizontal: 20),
    hintText: "Search",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
);

Но когда я добавляю prefixIcon к оформлению TextFormField, я не могу изменить высоту TextFormField, изменив отступ по вертикали. 

  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(vertical: 7.0, horizontal: 20),
    hintText: "Search",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    prefixIcon: Icon(Icons.search, size: 20.0),
  )

Я пытался уменьшить размер иконки. Но это только меняет размер иконки, отступы такие же.

Без фокуса:

without focus

С фокусом:

with focus

Я хочу только уменьшить высоту.

Спасибо ..

1 Ответ

1 голос
/ 12 мая 2019

prefixIcon обязательно оставит некоторые отступы в TextFormField, вместо этого вы можете использовать описанный ниже способ, где вы также можете регулировать высоту, ширину и отступ для значка TextFormField.В приведенном ниже примере мы берем Container и Row и делим их с помощью свойства flex виджета Expanded.После этого мы можем изменить высоту и ширину значка с помощью любого дочернего виджета, такого как Padding или SizedBox и т. Д. Кроме того, используя следующий способ, мы можем изменить высоту и ширину * 1010.* с отступом.

enter image description here

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.green,
      ),
      home: NumericComboLineBarChart(),
    );
  }
}

class NumericComboLineBarChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MY APP'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(15.0),
//              padding: const EdgeInsets.all(3.0),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.blueAccent),
                  borderRadius: BorderRadius.circular(10.0),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Expanded(
                    child: new Container(
                      child: Padding(padding: EdgeInsets.only(left: 2, right: 2),
                       child: Icon(
                         Icons.search,
                         size: 10.0,
                       ),)
                    ),
                    flex: 1,
                  ),

                  Expanded(
                    child: TextFormField(
                      keyboardType: TextInputType.text,
                      textInputAction: TextInputAction.search,
                      onFieldSubmitted: (term) {},
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.symmetric(vertical: 7.0, horizontal: 0),
                        hintText: "Search",
                        border: InputBorder.none,
                      ),
                    ),
                    flex: 9,
                  ),

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

Надеюсь, это поможет:)

...