我正在尝试为颤动中的列表创建一个过滤器。我希望在列表上方显示一些过滤器。像这样的东西 -

(来源:imge.to)
我无法弄清楚如何仅渲染这些过滤器的 2 行,然后使用“+X”渲染芯片,让用户知道还应用了多少个过滤器。所以我被这样的事情困住了 -

(来源:imge.to)
我如何生成这个“过滤器浏览”小部件的代码 -
class FilterGlance extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10.0, 10.0, 5, 0),
child: Text("FILTER",
style: TextStyle(
color: Colors.white30, fontWeight: FontWeight.bold)),
),
Container(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
verticalDirection: VerticalDirection.down,
runSpacing: 3.0,
spacing: 3.0,
children: <Widget>[
ChipDesign("Lifetime"),
ChipDesign("Student"),
ChipDesign("Salaried"),
ChipDesign("Corporate"),
ChipDesign("Open"),
ChipDesign("My Referral Code Users"),
ChipDesign("+10"),
],
),
),
],
);
}
}
class ChipDesign extends …Run Code Online (Sandbox Code Playgroud) 我正在尝试在 Flutter 中实现类似的东西。
https://a.imge.to/2019/08/22/mgrjU.png
但我现在被困在这个问题上。
https://a.imge.to/2019/08/22/mgB62.png
操作按钮固定在 UI 的顶部,不随文本移动。有什么办法可以把他们打倒在裂片妖吗?
我一直无法找到向 SliverAppBar 的 flexibleSpace 部分添加操作的方法
SliverAppBar(
floating: false,
pinned: true,
expandedHeight: 150.0,
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
flexibleSpace: const FlexibleSpaceBar(
title: Text("User Status", textAlign: TextAlign.justify,),
titlePadding: EdgeInsets.all(15.0),
),
actions: [
IconButton(
icon: Icon(Icons.refresh),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
)
],
);
Run Code Online (Sandbox Code Playgroud)
我希望操作按钮带有标题文本。当用户滚动时,按钮应该随着标题文本移动。
我正在尝试在我的地图顶部制作一个浮动搜索栏,就像谷歌地图应用程序中的搜索栏一样。像这样的东西——

我似乎无法让它漂浮。搜索栏不会覆盖在地图上。它只是在自己的框中呈现。

void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
theme: ThemeData.dark(),
home: MyAppState(),
));
}
class MyAppState extends StatelessWidget {
final LatLng _center = const LatLng(28.535517, 77.391029);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: FloatAppBar(),
body: Map(_center),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Report()),
);
},
child: Icon(Icons.add, semanticLabel: 'Action'),
backgroundColor: Colors.black87,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavBar(),
),
);
}
}
class FloatAppBar extends StatelessWidget with PreferredSizeWidget {
@override
Widget build(BuildContext context) { …Run Code Online (Sandbox Code Playgroud)