флаттер:: У меня есть вопрос о том, как использовать верхнюю панель приложения

#flutter #dart #appbar

Вопрос:

На этот раз я создаю верхнюю панель приложения в flutter. Я написал такой код.

 import 'package:flutter/material.dart';

class VideoAppBar extends StatelessWidget{
  const VideoAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return SafeArea(
      child: Scaffold(
        body: WillPopScope( // <- wraps only the Scaffold body.
          child: Center(
          ),
          onWillPop: () {

            return Future(() => false);
          },
        ),
        appBar: AppBar(

          backgroundColor: Colors.white,
          title: Text('Very verse',
            style: TextStyle(
              color: Colors.black,
              fontSize: 20,
            ),),
          centerTitle: true,
          leading: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            color: Colors.black,
            iconSize: 25,
            icon: Icon(Icons.arrow_back),

          ),

          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.bookmark_outline),
              iconSize: 25,
              color: Colors.black,
              onPressed: () {
                print('GD');
              }
          ),
          ],
        ),
      ),
    );
  }
}
 

Я хотел бы поместить этот код просто как функцию на несколько других страниц.

Панель приложений(название:ВидеоАппБар);

Я подумал, что это можно сделать вот так.

Но это не возвращается.

Как я должен написать код?

Ответ №1:

Попробуйте приведенный ниже код, надеюсь, он вам поможет

Создайте свой обычный класс или виджет, как показано ниже:

 import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  bool shouldPop = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WillPopScope(
        onWillPop: () async {
          return shouldPop;
        },
        child: Scaffold(
          appBar: appBar(context),
          body: Center(
            child: Text('Test'),
          ),
        ),
      ),
    );
  }
}
 

Создайте другой файл dart, например AppBar.dart, и объявите свой виджет панели приложений в файле dart. назовите свой виджет любым нужным вам файлом

 appBar(BuildContext context) {
  return AppBar(
    backgroundColor: Colors.white,
    title: Text(
      'Very verse',
      style: TextStyle(
        color: Colors.black,
        fontSize: 20,
      ),
    ),
    centerTitle: true,
    leading: IconButton(
      onPressed: () {
        Navigator.pop(context);
      },
      color: Colors.black,
      iconSize: 25,
      icon: Icon(Icons.arrow_back),
    ),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.bookmark_outline),
          iconSize: 25,
          color: Colors.black,
          onPressed: () {
            print('GD');
          }),
    ],
  );
}
 
  1. Для класса WillPopScope
  2. Для класса строительных лесов
  3. Для панели приложений

Ваш экран результатов -> Изображение