Как добавить текстовое поле внутри панели приложений во Flutter?

У меня проблема с TextField на AppBar, поэтому пользователь может вводить ввод так же, как при использовании панели поиска. Мне нужно взять ввод пользователя и что-то с ним сделать, чтобы это не поиск в моем приложении. Вот почему есть смысл использовать TextField.

Теперь мне удалось разместить TextField на левой стороне моего AppBar. Проблема в том, что TextField представляет собой квадрат и не занимает достаточно места, чтобы вы могли видеть, что пишете.

Ссылка на то, как это выглядит:

Панель поиска визуально

В коде это было сделано так:

 @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Myseum',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Raleway',
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "Myseum",
            style: TextStyle(
              fontFamily: 'Raleway',
              fontStyle: FontStyle.italic,
              fontSize: 25,
            ),
          ),
          leading: prefix0.TextBox(), // TextBox is the widget I made.
          backgroundColor: Colors.black,
        ),

Теперь виджет TextBox()

class TextBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      color: Colors.white,
      child: TextField(
        decoration:
            InputDecoration(border: InputBorder.none, hintText: 'Search'),
      ),
    );
  }
}

flutter dart textfield flutter-appbar
person WindBreeze    schedule 28.05.2019    source источник
comment
есть много пакетов, связанных с панелью поиска, которые вы можете использовать в своем проекте или в качестве руководства для создания собственной панели поиска: pub.dev/flutter/packages?q=searchbar   -  person diegoveloper    schedule 28.05.2019
comment
Я не хочу создавать панель поиска. Я хочу разместить текстовое поле на панели своего приложения   -  person WindBreeze    schedule 28.05.2019
comment
затем поместите текстовое поле в виджет title   -  person diegoveloper    schedule 28.05.2019

Ответы (1)


arrow_upward
5
arrow_downward

Как упоминалось в комментариях - поместите свое текстовое поле в виджет заголовка ... Я преобразовал ваш код в простой виджет с отслеживанием состояния, чтобы дать вам представление.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool typing = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: typing ? TextBox() : Text("Title"),
        leading: IconButton(
          icon: Icon(typing ? Icons.done : Icons.search),
          onPressed: () {
            setState(() {
              typing = !typing;
            });
          },
        ),
      ),
      body: Center(
        child: Text("Your app content"),
      ),
    );
  }
}

class TextBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      color: Colors.white,
      child: TextField(
        decoration:
            InputDecoration(border: InputBorder.none, hintText: 'Search'),
      ),
    );
  }
}
person Xander Terblanche    schedule 28.05.2019