Блог

Я хочу повторно использовать код мобильного приложения для flutter web. Я уже закодировал виджеты AppBar() и body в scaffold на всех экранах. Теперь я беру ширину 400 и центр для интернета, это хорошо, кроме панели приложений.

         Scaffold(
        appBar: this.getAppBarWidget(),
        body: Center(
          child: Container(
            width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
            child: this.getBodyWidget(),
          ),
        ))
 

Приведенный выше код отлично работает для всех экранов мобильных устройств и Интернета, кроме панели приложений в Интернете.

Как изменить ширину панели приложений, чтобы она соответствовала ширине 400 ?

Если я использую Size.fromWidth(400), появляется ошибка.

Приведенный ниже код работает для мобильных устройств и Интернета.

    Scaffold(
    body: Center(
  child: Container(
    width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
    child: Column(
      children: [
        this.getCustomAppbarWidget(),
        this.getBodyWidget(),
      ],
    ),
  ),
))
 

Пожалуйста, предложите мне.

Размер, который предпочел бы этот виджет, если бы он был в противном случае неограничен. Во многих случаях необходимо определить только одно предпочтительное измерение. Например, [Каркас] зависит только от предпочтительной высоты панели приложений. В этом случае реализации этого метода могут просто возвращать новый размер.fromHeight(myAppBarHeight).

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

 class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        alignment: Alignment.center,
        color: Colors.pink,
        // we can set width here with conditions
        width: 200,
        height: kToolbarHeight,
        child: Text("MY AppBar"),
      ),
    );
  }

  ///width doesnt matter
  @override
  Size get preferredSize => Size(200, kToolbarHeight);
}
 

и использовать

 Scaffold(
      extendBodyBehindAppBar: true,
      appBar: MyAppBar(),
      body: ......
 

если это касается 1-го элемента корпуса, и в этом случае используйте SizedBox(height: kToolbarHeight) , чтобы справиться с ситуацией, если это необходимо.
Результат

Как я знаю, ширина не позволяла в панели приложений. В панели приложений разрешена только высота

toolbarHeight: 60,

Но если вы хотите применить ширину вручную в панели приложений, вы можете обернуть панель приложений в компонент заполнения

 return Scaffold(
      body: Column(
        children: [
          Container(
            width: kIsWeb? 400 : double.maxFinite,
            child: AppBar(
              title: Text('hello'),
            ),
          ),
          Expanded(child: HomePageOne()), // this expanded is you page body
        ],
      ),
    );