Как увеличить размер AppBar в скаффолде?

Мой appBar переполняется, когда я пытаюсь добавить в него больше виджетов. До определенного момента все было в порядке, затем я захотел добавить верхние и нижние отступы, а затем он переполнился. Есть ли способ увеличить размер панели приложения?

Я видел в документах свойство PreferredSize, но не могу его использовать.

Я хочу, чтобы моя панель приложений включала значок фотографии, некоторый текст и еще один значок подряд. Я сделал следующим образом. Я знаю, что это, вероятно, немного грубо, но не смог понять по-другому. (p.s. я пытался вести, но это не дало желаемых результатов)

Мой код:

return Scaffold(

     appBar: AppBar(
     // preferredSize
      // ERROR: The named paramtere isnt defined 

       title: Column(
         children: <Widget>[,
           Row(
             children: <Widget>[
               SizedBox(width: 10.0),
               Container(
                   width: 50.0,
                   height: 50.0,
                   decoration: new BoxDecoration(
                       shape: BoxShape.circle,
                       image: new DecorationImage(
                           fit: BoxFit.fitWidth,
                           image: new AssetImage('assets/jane.jpg')
                       )
                   )),
               SizedBox(width: 15.0),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   SizedBox(height: 5.0),
                   Text('Good Morning!', style: TextStyle(color: Color(0XFF9c9c9c) , fontWeight: FontWeight.w400, fontSize: 16.0)),
                   Text('Jane Doe ', style: TextStyle(color: Color(0xFF2a2a2a),fontWeight: FontWeight.w700,fontSize: 25.0))
                 ],
               ),
             ],
           ),

         ],
       ),


       bottom: TabBar(
         ...),
     ),      
     body: (...)
     ,);
 } }

enter image description here

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
0
1 869
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

создать пользовательскую панель приложений, например

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
    CustomAppBar({Key key, this.title}) : preferredSize = Size.fromHeight(56.0), super(key: key);

    @override
    final Size preferredSize;
    final String title;

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

class _CustomAppBarState extends State<CustomAppBar>{

  String get title => widget.title;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      leading: IconButton(
        icon: Icon(Icons.arrow_back_ios, size: 20),
        onPressed: () => Navigator.pop(context),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      titleSpacing: 0,
    );
  }
}

я пробовал это.. он увеличивает общую высоту панели приложений, но заголовок все еще переполняется.. Я думаю, что заголовок имеет фиксированную высоту, которая переполняется при пересечении. Можно ли его расширить? .

Denise 22.05.2019 14:50

@ Дениз, может быть, SliverAppBar может тебе помочь?

Arthur Khabirov 22.05.2019 15:08

Я считаю, что это для прокручиваемого представления и панели приложений, однако это не мое требование.

Denise 22.05.2019 15:15

Вы можете сделать это следующим образом:

AppBar(
 title: Text('Sized App Bar'),
 bottom: PreferredSize(
  child: Text('PreferredSize must have a child'),
  preferredSize: Size.fromHeight(10), //Change 10 to which ever size you desire.
 ),
),

Это увеличивает размер панели приложений, однако заголовок по-прежнему переполняется, поскольку в нем много виджетов. Есть ли способ растянуть размер виджета заголовка?

Denise 23.05.2019 09:28

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