I have a SliverAppBar and i am trying to position three items in a row:
User Profile Picture
User Account Information
Notification bar widget
But whenever i try to add the User Account Information Widget in the row i either get a render flex error or it gets positions incorrectly and get out of sight.
This is what i've tried and i will give the code snippets my SliverAppBar.
Using a flexibleSpace with a FlexibleSpaceBar() widget and wrapping the title in a row where i then instantiate the 3 widgets.
HomeAccountPicture(),
HomeAccountDetails(),
NotificationsButtonWidget(),
as the child.
I made sure the respective widgets are just wrapped in 'Containers()`
This is my Sliver App Snippet
class HomeView extends GetView<HomeController> {
#override
Widget build(BuildContext context) {
controller.initScrollController();
return WillPopScope(
onWillPop: Helper().onWillPop,
child: Scaffold(
body: RefreshIndicator(
onRefresh: () async {
Get.find<LaravelApiClient>().forceRefresh();
controller.refreshHome(showMessage: true);
Get.find<LaravelApiClient>().unForceRefresh();
},
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
controller: controller.scrollController,
shrinkWrap: false,
slivers: <Widget>[
SliverAppBar(
backgroundColor: Color(0xffFFFFFF),
expandedHeight: MediaQuery.of(context).size.height * 0.25,
elevation: 0.5,
//pinned: true,
floating: false,
iconTheme: IconThemeData(color: Get.theme.primaryColor),
centerTitle: true,
flexibleSpace: FlexibleSpaceBar(
title: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
HomeAccountPicture(),
HomeAccountDetails(),
NotificationsButtonWidget(),
],
),
),
automaticallyImplyLeading: false,
),
SliverToBoxAdapter(
child: Wrap(
children: [
BookingsListWidget(),
],
),
),
],
)),
),
);
}
}
This is my expectation
This is what i get
Related
hello there i want to add another one listview on the same screen, how can i do that?
hello there i want to add another one listview on the same screen, how can i do that?
here is my code:
return Scaffold(
appBar: AppBar(title: Text('detailsPage'),
),
body: ListView(
children: [
Card(
child: ListTile(
title:new Center(child:new Text(utf8.decode(appController.userName.runes.toList()) + " " + utf8.decode(appController.userSurname.runes.toList()))),
subtitle:new Center(child:new Text('UserID: '+appController.userid.toString())),
)
),
Card(
child: ListTile(
title:new Center(child:new Text(months[index])),
subtitle:new Center(child:new Text("This month you have done "+appController.Totaleachlength[index].toString()+' charges')),
),
),
Card(
child: ListTile(
title:new Center(child:new Text(appController.Totaleachlist[index].toStringAsFixed(3)+"€")),
subtitle:new Center(child:new Text("Total amount")),
)
),
ElevatedButton(child: Text('Download Bill pdf'),
onPressed: () => ''),
ListTile(
title: new Center(child: new Text('Details of your charges'),),
),
],
shrinkWrap: true,
),
);
if you want to divide your screen, you can use Column
return Scaffold(
appBar: AppBar(title: Text('detailsPage'),),
body : Column(
children: [
Expanded(flex: 2 // you can customize as you need
child: ListView()
),
Expanded(flex: 3 // you can customize as you need
child: ListView()
),
])
Column:(
children: [
ListView1(),
ListView2(),
]
),
If each list didnt scroll, wrap your each one with SingleChildScrollView and if you like to listviews expand all height you can use Expanded
You can also add your another ListView at last child like
ListView:(
children: [
Card()
ListView()
]
)
You have to use shrinkWrap in your child ListView to extend the size in the screen
dont forget to add ClampingScrollPhysics to scroll from parent pehavior
class NestedListView extends StatelessWidget {
const NestedListView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
...List.generate(
20, (index) => Text('Parent List View Index $index')),
ListView(
/// * [ClampingScrollPhysics], which provides the clamping overscroll behavior
physics: const ClampingScrollPhysics(),
/// * [shrinkWrap], which provides the Max size of list in screen
shrinkWrap: true,
children: List.generate(
20, (index) => Text('List View ONE Index $index')),
),
ListView(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
children: List.generate(
20, (index) => Text('List View Two Index $index')),
),
],
),
);
}
}
Is there a way to modify the appbar that I get from pushedName or is there a way that I can remove the appbar? I've been searching for around 2 hours already and I can't find any answer relate of it. Some of question suggest to use the appBar command. Tried it already but for me they give me more appbar now. and they become double after I putting the appbar in my scaffold widget. This is the pic of the app bar now. (I even can't change my icon color in that app bar)
class _seller_profile_screenState extends State<seller_profile_screen> {
double tp = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
CustomScrollView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
slivers: [
SliverAppBar(
pinned: true,
stretch: true,
expandedHeight: 200,
flexibleSpace: LayoutBuilder(builder: (ctx, cons) {
tp = cons.biggest.height;
return FlexibleSpaceBar(
centerTitle: true,
background: Stack(
fit: StackFit.expand,
children: [
Image.asset(
'assets/images/cloud_background.jpg',
fit: BoxFit.cover,
),
SafeArea(
child: Padding(
padding: const EdgeInsets.all(10),
child: Column(children: [
//
]),
),
)
],
),
);
})),
],
)
],
),
);
}
}
This is due to screen hierarchy. There was one screen before this so you get back button by default when you use snackbar. If you want to remove this then do like this:
Scaffold(
appBar:AppBar(
...
automaticallyImplyLeading: false,
),
body:...);
I have a Header that consists of:
1 - appBar (title + return button)
2 - row with a data picker)
3 - a row serving as a customized TabBar (with two Tabs)
4 - a row serving as a FilterBar (with a Button and a search field)
Then I have the "body" with a list of Cards that is scrollable.
I needed to retract/hide numbers 1-3 and keep only number 4 visible when I scroll down the list of cards. How could I build a customized Widget to help me with that?
Here is part of the code (it's too long to bring everything):
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor: Colors.blue,
title: 'List of Tasks',
elevation: 0.0,
pinned: true,
),
SliverPadding(
padding: EdgeInsets.all(15),
sliver: SliverToBoxAdapter(
child: DatePicker(
date: date,
onChange: (newDate) {
setState(() {});
},
),
),
),
SliverToBoxAdapter(
child: ActivitiesTabController(
pageController: _pageController,
currentTab: currentTab,
onChangedTab: (currentTab) {},
),
),
SliverToBoxAdapter(
child: Row(
children: [
SearchFilterBar(
taskId: taskId,
onChange: (floors, serviceName) {},
),
],
),
),
SliverList(
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return new Container(color: Colors.amberAccent, height: 150.0);
}),
),
],
));
}
I think you're referring to two app bars, where the first one can be scrolled away while the second one is persistent.
I think it would be something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(slivers: [
SliverAppBar(
title: Text('This hides'),
),
SliverAppBar(
title: Text('This is always shown'),
pinned: true,
primary: false,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(_, i) {
return ListTile(title: Text('Line $i'));
},
childCount: 150,
),
),
]),
);
}
I have home screen with bottom navigation consist of two items which all have ListView inside with infinite list and I want SliverAppBar to be scrollable when user scrolls in one of the list.
Here is what I have so far
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: new Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
snap: false,
floating: false,
pinned: true,
expandedHeight: 160.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Title'),
),
),
SliverFillRemaining(
child: TabBarView(
children: <Widget>[Items(), Activities()], //THESE HAVE LIST VIEW IN EACH
),
)
],
),
));
}
}
And here is code of one of TabBarView children.
class Items extends StatelessWidget {
#override
Widget build(BuildContext context) {
List<Widget> itemsWidgets = List.from(getItemsList()
.map((Item item) => createItemWidget(context, item)));
return Scaffold(
body: Center(
child: ListView(
children: itemsWidgets,
),
),
);
}
ListTile createItemWidget(BuildContext context, Item item) {
return new ListTile(
title: Text(item.sender.name),
subtitle: Text('10:30 am'),
);
}
}
How can SilverAppBar be scrollable when user scrolls in one of the list? Any help/suggestion will be appreciated.
Use NestedScrollView. There is an example in the api
I face a problem by wrapping TextField with new Expanded(). When try to search something in textfield its show me bottom overflow by 30px. Below is my code:
Widget build(BuildContext context) {
return new Scaffold(
body:
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {
setState(() {
});
}),
new Flexible(
child: new TextField(
onChanged: (String value) {
onchange(value);
},
maxLines: 1,
autocorrect: true,
// decoration: const InputDecoration(helperText: "Search"),
style: new TextStyle(fontSize: 10.0, color: Colors.black),
),
),
_text != null ? IconButton(
icon: Icon(Icons.close), onPressed: (){
}) : new Container(),
IconButton(icon: Icon(Icons.bookmark_border), onPressed: () {}),
],
),
new Expanded(
child: FilstList(searchtext: _text,)
),
],
),
);
}
}
There are two solutions to this problem.
Add resizeToAvoidBottomPadding: false to your Scaffold
Scaffold(
resizeToAvoidBottomPadding: false,
body: ...)
Put your FilstList(searchtext: _text,) inside a scrollableView (like SingleChildScrollView or ListView)
Use Scaffold property "resizeToAvoidBottomPadding: false"
and "SingleChildScrollView" as parent of Scaffold body:
home: Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text("Registration Page"),
),
body: SingleChildScrollView(
child: RegisterUser(),
)),
this will solve issue.
You should use resizeToAvoidBottomInset
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
...
)
If you're having issues with overflow error, use SingleChildScrollView with it.
Scaffold(
resizeToAvoidBottomInset: false, // set it to false
body: SingleChildScrollView(child: YourBody()),
)
I faced a similar problem and fixed it in the following way:
You can wrap it with SingleChildScrollView or with a ListView.
Scaffold(
body: Container(
height: MediaQuery.of(context).size.height * .50,
child: SingleChildScrollView(
child: Column(
....
)
)
)
);
put resizeToAvoidBottomPadding as false in Scaffold:
Scaffold(
resizeToAvoidBottomPadding: false,
update
it is better solution:
remove Column and put instead it ListView
because if you run this app on smaller device bottom items will disappear and hide from the show screen and that will be bad for App users.
Use of resizeToAvoidBottomInset: false in your Scaffold is the best solution to that.
Do two way
NO1.
Scaffold(
resizeToAvoidBottomPadding: false, )
The problem is when you do this body content never gone top when you select input box..
Best practice
SingleChildScrollView widget
Use CustomScrollView with SliverToBoxAdapter:
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Form(....)
),
]
)
Use Scaffold and make "resizeToAvoidBottomInset" false.
Scaffold(
resizeToAvoidBottomInset: false,
........
)
Used SigleChildScrollView
sample code
Scaffold(
appBar: //AppBar
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 3.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,