Flutter добавляет TextField под панелью приложений

Я хочу добавить текстовое поле в нижнюю панель приложений. Я использовал нижнюю часть и PreferredSize на панели приложений, но текстовое поле все еще не отображается.

это изображение введите сюда описание изображения

и это все код

import 'package:flutter/material.dart';

import '../../utils/utils.dart';

class MaterialRequestScreen extends StatefulWidget {
  const MaterialRequestScreen({super.key});

  @override
  State<MaterialRequestScreen> createState() => _MaterialRequestScreenState();
}

class _MaterialRequestScreenState extends State<MaterialRequestScreen> {
  TextEditingController searchC = TextEditingController();

  @override
  void initState() {
    searchC.text = 'hallo';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppStrings.materialRequest),
        centerTitle: true,
        backgroundColor: AppColor.neutral50,
        bottomOpacity: 0.0,
        bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: Container(
              color: Colors.red,
              child: TextField(
                controller: searchC,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: AppColor.neutral500,
                  prefixIcon: Icon(Icons.search),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                    borderSide: BorderSide.none,
                  ),
                  hintText: 'Search...',
                ),
              ),
            )),
      ),
    );
  }
}

мне это нравится введите сюда описание изображения

flutter dart textfield flutter-appbar

05.08.2024 06:48

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

AppBar(
      toolbarHeight: 80,
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Title"),
          TextField(
            decoration: InputDecoration(hintText: "Your text"),
          )
        ],
      ),
    ),

05.08.2024 06:54

попробуйте этот код

Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(120.0), // Set the height of the AppBar
        child: AppBar(
          automaticallyImplyLeading: false, // Removes default back button
          flexibleSpace: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              AppBar(
                automaticallyImplyLeading: true, // Adds back button
                title: Text('Material Request'),
                elevation: 0,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                child: Container(
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: 'Search for an item',
                      border: InputBorder.none,
                      prefixIcon: Icon(Icons.search),
                    ),
                  ),
                ),
              ),
            ],
          ),
          elevation: 0,
        ),
      ),
      body: Center(
        child: Text('Body Content'),
      ),

вы получите примерно такие результаты:

05.08.2024 08:23

Другие вопросы по теме

Проверьте в Dart, прошла ли расшифровка ChaCha20-Poly1305-IETF успешно

Обработчик ошибок Future.catchError должен возвращать значение типа Future

Как реализовать LSP (принцип замены Лискова) с помощью Dart на реальном примере

Почему для дротика/флаттера иногда требуется запятая вместо точки с запятой в дротике?

Как удалить элементы из ListView.builder и обновить список во Flutter

Не могу установить Flutter в Windows

Доступ к свойству ThemeData внутри определения ThemeData

Не могу вызвать функцию onTap

Как перемещаться внутри initState() во Flutter

Ошибка Flutter: тип аргумента «двойной?» не может быть присвоен типу параметра «двойной»

Flutter добавляет TextField под панелью приложений

Ответы 2

Другие вопросы по теме

Похожие вопросы