[英]How to show a Container fixed at bottom of screen without using bottom navigation bar in Flutter?
In my flutter project, I have a container with some icons and text below them.在我的 flutter 项目中,我有一个容器,下面有一些图标和文本。 I want this entire container to be fixed at bottom of the screen without using bottom navigation bar like the below image-
我希望将整个容器固定在屏幕底部,而不使用下图所示的底部导航栏-
So, I need an entire example to fix that container at bottom and keep my other components inside body with a scroll view.因此,我需要一个完整的示例来修复底部的容器,并使用滚动视图将我的其他组件保留在主体内。
Ok, Here you go....好的,给你 go....
return Scaffold(
appBar: AppBar(
title: Text("Header"),
),
body: Column(
children: <Widget>[
Expanded(
child: Container(
alignment: Alignment.center,
child: Text("Hello"),
),
),
Container(
height: 50,
width: double.maxFinite,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){},),
IconButton(icon: Icon(Icons.arrow_downward), onPressed: (){},),
IconButton(icon: Icon(Icons.arrow_left), onPressed: (){},),
IconButton(icon: Icon(Icons.arrow_upward), onPressed: (){},),
],
),
)
],
),
);
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
width: double.maxFinite,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(icon: Icon(Icons.arrow_forward), onPressed: (){},),
IconButton(icon: Icon(Icons.arrow_downward), onPressed: (){},),
IconButton(icon: Icon(Icons.arrow_left), onPressed: (){},),
IconButton(icon: Icon(Icons.arrow_upward), onPressed: (){},),
],
),
),
),
If you want to make a scrollable item/listview in the body section and want a fixed bottom container you can follow this code given below:如果你想在正文部分创建一个可滚动的项目/列表视图并想要一个固定的底部容器,你可以按照下面给出的代码:
important note: Make sure wrap the listview with Expanded重要说明:确保使用 Expanded 包装列表视图
import 'package:flutter/material.dart';导入“包:颤振/material.dart”;
class ShoppingCart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
),
actions: <Widget>[
GestureDetector(
onTap: () {
//your code
},
child: Padding(
padding: const EdgeInsets.only(right: 15.0),
child: Icon(
Icons.delete_outline_sharp,
color: Colors.black,
size: 30,
),
)),
//Add more icon here
],
elevation: 0,
centerTitle: false,
title:
Text("Shopping Cart", style: TextStyle(color: Colors.black))),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: shoppingCartItems.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(
top: 15.0, left: 12.0, right: 12.0),
child: Container(
decoration: BoxDecoration(
// color: Color(0xffF3F3F3),
color: Colors.red,
shape: BoxShape.rectangle,
borderRadius:
BorderRadius.all(Radius.circular(10.0))),
height: 120,
width: 360,
),
);
},
),
),
Container(
height: 150,
width: double.maxFinite,
decoration: BoxDecoration(
color: Colors.deepOrange[200],
borderRadius:
BorderRadius.vertical(top: Radius.circular(20.0))),
)
],
));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.