Comments (7)
This is one of the approach to reduce the space.
Firstly, the space is created due to the height of Container inside lib/home/components/header_with_searchbox.dart
:
Before:
class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 20.0 * 2.5),
height: size.height * 0.2,
Therefore, we reduce the height to 0.12 * size.height. At the same time, remove the margin bottom.
After:
class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
However, this fix will lead to big corruption in search bar(search bar moving upward near appbar). In order to fix this, we replace bottom: 70
in Positioned with top: 45
.
Before,
Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 56,
),
height: size.height * 0.2 - 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
),
Positioned(
bottom: 70,
left: 0,
right: 0,
After,
Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 56,
),
height: size.height * 0.2 - 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
),
Positioned(
top: 45,
left: 0,
right: 0,
from 4lingo.
from 4lingo.
from 4lingo.
iPhone 6s Plus seems not to work very well with this approach
from 4lingo.
from 4lingo.
Neither does this Samsung phone.
from 4lingo.
Here is the suggestion for making pinned search bar when scrolling and also fixing the blank space:
lib/home/home_page.dart>HomeScreen>Scaffold>CustomScrollView
SliverPersistentHeader(
pinned: true,
delegate: PersistentHeader(
widget: HeaderWithSearchBox(size: size),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Column(
children: <Widget>[
Word(),
],
),
],
),
),
lib/home/�components/header_with_searchbox.dart
class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
height: size.height * 0.12,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
bottom: 56,
),
/*
height: size.height * 0.2 - 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
*/
),
/* ........................... */
class PersistentHeader extends SliverPersistentHeaderDelegate {
final Widget widget;
PersistentHeader({this.widget});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
width: double.infinity,
height: 105.0,
child: Card(
margin: EdgeInsets.all(0),
color: Colors.white,
elevation: 0,
child: Center(child: widget),
),
);
}
@override
double get maxExtent => 105.0;
@override
double get minExtent => 105.0;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}
from 4lingo.
Related Issues (2)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 4lingo.