flutter学习--不规则底部导航栏制作

最新推荐文章于 2024-04-05 05:13:29 发布

原创

最新推荐文章于 2024-04-05 05:13:29 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #flutter

本文介绍了如何在Flutter中创建不规则底部导航栏，包括自定义主题、使用`floatingActionButton`、`BottomAppBar`组件，以及制作StatefulWidget子页面和按钮交互效果。通过实例代码展示了如何将悬浮按钮与底栏融合，以及子页面的标题和内容展示。

不规则底部导航栏

自定义主题样本

Flutter支持自定义主题，如果使用自定义主题，设置的内容项是非常多的，Flutter贴心的为给我们准备了主题样本。

theme: ThemeData(
  primarySwatch: Colors.lightBlue,
),

会了这个知识后，我们就可以先把我们的主入口文件编写一下了，具体代码如下：

import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart';

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
theme: ThemeData(
  primarySwatch: Colors.lightBlue,
),
      home:BottomAppBarDemo(),
    );
  }
}

这时候bottom_appBar_demo.dart这个文件还没有，也找不到，这个文件是我们的主要文件，我们的主要业务逻辑会写在这个文件里。

因为没有所以你写完之后会报错，那接下来我们就来编写这个文件。