Safaricom应用首页
庆祝这个节日季 ???
我设计了Safaricom应用首页，它看起来就像2022年12月21日的样子，使用的是flutter。Safaricom应用UI很可能使用了React Native构建，但我决定使用flutter来设计它，并尽可能地接近实际应用，除了图标和颜色。
很棒的功能 ???
1. Custom Scroll View
这是flutter的scrollview，允许创建可滚动的内容。首页有一个CustomScrollView，允许主体内容滚动。
2. Slivers
Sliver只是可滚动区域的一部分。Flutter包含Slivers，用于制作列表、网格、应用程序栏和单子框系列小部件。例如：
SliverListSliverGridSliverAppBarSliverToBoxAdapter
3. SliverAppBar
这是一个带有滚动功能的应用程序栏，它允许应用程序栏使用FlexibleSpaceBar小部件拥有背景，该小部件与expandedHeight属性配合使用。FlexibleSpaceBar将背景作为属性，然后用于设计应用程序栏的背景。应用程序栏的背景将具有动画，在滚动时显示和消失。
4. 将浮动按钮放在SliverAppBar的底部边距上方
SliverAppBar有一个名为bottom的属性，用于定义底部的标签栏。在这种情况下，我将其与Transform.translate()结合使用，以将一个按钮（(View My Balances)）从SliverAppBar偏移，并让它浮动在SliverAppBar的底部边距之上。?
5. ScrollController和NotificationListener
Safaricom应用的应用程序栏有一个标题，在应用程序栏展开时居中显示。当应用程序栏折叠时，标题会移到左侧。为了实现这种效果，需要将一个滚动控制器设置给CustomScrollView。然后为CustomScrollView设置一个事件监听器，该监听器会监视应用程序栏的状态。当应用程序栏折叠时，将centerTitle布尔属性设置为false，并将标题对齐到左侧；当应用程序栏展开时，再恢复到中心。
6. SliverToBoxAdapter
我使用SliverToBoxAdapter将单个子容器渲染为sliver的一部分。同样，sliver是可滚动区域的一部分，因此普通的flutter Container是不可滚动的。为了让一个容器位于可滚动区域内，并使其与内容一起滚动，需要将SliverToBoxAdapter包裹在Container小部件周围。
7. Offstage
我将第一个广告容器包装在Offstage小部件中，当点击关闭按钮X时，整个广告容器就可以被移除。只需将Offstage小部件的offstage属性设置为true，就可以从element和renderObject树中移除该小部件。
8. Flutter Carousel Slider包
一个很棒且维护良好的包，用于创建flutter轮播。完整的文档可在 ?? Flutter Carousel Slider处找到。
使用的依赖项。请查看pubspec.yaml文件
精美的图标来自 Flaticon
输出
