Flutter – Material Banner 小工具

在这篇文章中，我们将了解一个叫做材质横幅新功能，是flutter一个新的功能，并在flutter版本2.5.0发布得到。

什么是材料横幅？

横幅显示重要消息并要求用户执行某些操作。横幅显示在应用栏下方的屏幕顶部。它们是持久的，因此允许用户忽略它们或执行某些操作。

要记住的要点：

• 横幅容器是矩形的，并扩展了整个小部件。
• 此容器具有前导图标、文本和操作按钮。
• 横幅可以包含两个文本按钮，左侧为关闭操作按钮，右侧为确认操作按钮。

现在让我们看看材料横幅小部件是如何在flutter应用程序中实现的：

步骤 1：通过转到终端并运行命令flutter –version检查flutter版本。这样做的原因是材质横幅小部件是在 2.5.0 版本中引入的，所以要使用这个小部件，我们需要最新版本。

如果您的版本低于 2.5.0，则转到终端并运行命令flutter upgrade 。你的flutter版本将得到更新。

第 2 步：现在让我们看看如何通过直接切换到我们的代码编辑器来使用此功能。

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);
  
  @override
  State createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
    
  
  @override
  Widget build(BuildContext context) {
      
    return Scaffold(
      appBar: AppBar(
          
        title: const Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
          
        child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            ElevatedButton(onPressed: () => showMaterialBanner(),
                           child: const Text('Material Banner'))
              
          ],
        ),
      ),
         
    );
    }
    // Material Banner implementation
    showMaterialBanner(){
       ScaffoldMessenger.of(context).showMaterialBanner(
         MaterialBanner(
          content: const Text('Hello, I am Material Banner!'), 
         contentTextStyle: const TextStyle(color: Colors.black ,fontSize: 30),
         backgroundColor: Colors.yellow,
         leadingPadding: const EdgeInsets.only(right: 30),
         leading: const Icon(Icons.info, size: 32,),
         actions:[
           TextButton(onPressed: () {},
             
           child: const Text('Dismiss')),
  
           TextButton(onPressed: (){}, child: const Text('Continue')),
  
             
         ])
         );
    }
}

输出：

解释：

• 为了创建横幅，我们创建了一个提升的按钮，该提升的按钮调用名为showMaterialBanner()的方法。
• 在这个showMaterialBanner()方法中，我们使用scaffold messanger调用了材质横幅来使用材质横幅功能。

• 在调用该功能后，我们已经实现了材质横幅包含的属性，例如 -内容、背景颜色、前导图标、操作按钮和填充。
• 当我们运行程序时，我们看到当我们点击 Material Banner 按钮时，我们会在顶部看到一个黄色的材质横幅。

第三步：现在如果我们想从顶部关闭我们的材料横幅，那么我们必须为我们的操作按钮提供功能。因此，在我们的关闭操作按钮中，我们将属性赋予了onPressed 方法：hideCurrentMaterialBanner。

完整的源代码：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);
  
  @override
  State createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
    
  
  @override
  Widget build(BuildContext context) {
      
    return Scaffold(
      appBar: AppBar(
          
        title: const Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
          
        child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            ElevatedButton(onPressed: () => showMaterialBanner(),
                           child: const Text('Material Banner'))
              
          ],
        ),
      ),
         
    );
    }
    showMaterialBanner(){
       ScaffoldMessenger.of(context).showMaterialBanner(
         MaterialBanner(
          content: const Text('Hello, I am Material Banner!'), 
         contentTextStyle: const TextStyle(color: Colors.black ,fontSize: 30),
         backgroundColor: Colors.yellow,
         leadingPadding: const EdgeInsets.only(right: 30),
         leading: const Icon(Icons.info, size: 32,),
         actions:[
           TextButton(onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
             
           child: const Text('Dismiss')),
  
           TextButton(onPressed: (){}, child: const Text('Continue')),
  
             
         ])
         );
    }
}

输出：

解释：

• 当我们点击Material Banner 按钮时，我们会在顶部看到一个材质横幅。
• 要删除该横幅，我们点击关闭按钮，横幅从顶部被关闭。