flutter:: 我有一个关于如何使用应用顶部栏的问题

Question

This time I'm making an app top bar in flutter. I wrote code like this.

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');
              }
          ),
          ],
        ),
      ),
    );
  }
}

I'd like to put this code simply as a function on several other pages.

AppBar(title:VideoAppBar);

I figured it could be done like this.

But it doesn't go back.

How should I write the code?

Answer 1

Try below Code hope its helpful to you

Create your regular class or your Widget like below:

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'),
          ),
        ),
      ),
    );
  }
}

Create another dart file like appBar.dart and declare your Appbar Widget in dart file. call your widget any file on your need

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. ForWillPopScope class

2. For Scaffold class

3. For AppBar

Your result screen ->

Answer 2

**Using the top app bar The top app bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

A regular top app bar can transform into a contextual action bar.

Before you can use Material buttons, you need to import the Material Components package for Flutter:

package:flutter/material.dart You need to use MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making the top app bar accessible Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Types There are two types of top app bar: 1. regular top app bar 2. contextual action bar**

AppBar(
leading: Icon(Icons.menu),
title: Text('Page title'),
actions: [
Icon(Icons.favorite),
  Padding(
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Icon(Icons.search),
    ),
   Icon(Icons.more_vert),
   ],
   backgroundColor: Colors.purple,
),