Flutter DraggableScrollableSheet with multiple descendant Scrollable widgets - flutter

I want to add Routing inside DraggableScrollableSheet widget, so I need a way to add many Scrollable widgets like ListView GridView etc inside DraggalbleScrollable. I was thinking about using NotificationListener to listen all ScrollNotification events of descendants but I dont know what to do with controller.
import 'package:flutter/material.dart';
class NestedDraggableScrollable extends StatelessWidget {
const NestedDraggableScrollable({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Positioned.fill(
child: DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.1,
maxChildSize: 1,
builder: (context, controller) =>
NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification scrollInfo) {
///??????
controller.jumpTo(scrollInfo.metrics.pixels);
return true;
///??????
},
child: PageView(
children: [
ListView(
children: const [
ListTile(
key: Key("value1"),
title: Text("One"),
),
ListTile(
key: Key("value2"),
title: Text("Two"),
),
ListTile(
key: Key("value3"),
title: Text("Three"),
),
],
),
ListView(
children: const [
ListTile(
title: Text("One One"),
),
ListTile(
title: Text("Two Two"),
),
ListTile(
title: Text("Three Three"),
),
],
),
],
),
)),
);
}
}

Related

Flutter: Material Widget And SingleChildScrollView Render Conflict Inside Drawer

This problem only happens inside Drawer
I wanted to shape the ripple effect of my ExpansionTile so I used the Material widget and it works, but when the tile expands, the background color of the tiles below ExpansionTile does not move with them.
When ExpansionTile is collapsed
When ExpansionTile is expanded
I found out that when I remove SingleChildScrollView the problem solves but I need items to scroll. Also when ScrollPhysics has been set to AlwaysScroll, scrolling till the end of the scroll's possible position would rerender items and fix the issue.
Reproducible Example:
void main() {
runApp(
MaterialApp(
title: 'Title',
home: Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
drawer: const MyList(),
body: Container(),
),
),
);
}
class MyList extends StatelessWidget {
const MyList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
items(),
],
),
),
);
}
Widget items() {
return Wrap(
runSpacing: 12,
children: [
menu(),
const ListTile(title: Text('title'), tileColor: Colors.grey),
const ListTile(title: Text('title')),
]
);
}
Widget menu() {
return Material(
clipBehavior: Clip.antiAlias,
type: MaterialType.transparency,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
child: const ExpansionTile(
leading: Icon(Icons.group),
title: Text('title'),
children: [
ListTile(title: Text('title')),
ListTile(title: Text('title')),
],
),
);
}
}
If you want to avoid SingleChildScrollView and still be able to scroll over a list, you can use ListView.builder link: - ListView.builder flutter.dev
Try removing type: MaterialType.transparency,
class MyList extends StatelessWidget {
const MyList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: SingleChildScrollView(
child: Column(
children: [
for (int i = 0; i < 2; i++) items(),
],
),
),
);
}
Widget items() {
return Wrap(
children: [
menu(),
const ListTile(
title: Text('title'),
tileColor: Colors.grey,
),
const ListTile(title: Text('title')),
],
);
}
Widget menu() {
return Material(
clipBehavior: Clip.antiAlias,
// type: MaterialType.transparency,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: const ExpansionTile(
leading: Icon(Icons.group),
title: Text('title'),
children: [
ListTile(title: Text('title')),
ListTile(title: Text('title')),
],
),
);
}
}
I asked for this problem on flutter's Github repo and I got the answer.
Just need to use ListTileTheme widget instead of Material widget.
Github issue link:
https://github.com/flutter/flutter/issues/112372

How can I place a button in a scrollable list with ExpansionTiles in Flutter?

I have a scrolableView with x amount of ExpansionTiles, I need to place the 'Test' button on the bottom of the page, only if a number of tiles are fitting the screen or if they expand within the page, else to push the button off the screen.
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key}) : super(key: key);
List datas = [1, 2, 3, 4, 5, 6];
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: datas.length,
shrinkWrap: true,
itemBuilder: (context, i) {
return ExpansionTile(
title: Text(
datas[i].toString(),
),
children: List.generate(
datas.length,
(index) {
return Text(datas[index].toString());
},
));
},
),
ElevatedButton(onPressed: () {}, child: Text('Test'))
],
),
),
),
);
}
}
The UX is a little tricky. It will be easy and get better performance using CustomScrollView.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate.fixed(
[
...datas
.map((e) => ExpansionTile(
title: Text(
e.toString(),
),
children: List.generate(
datas.length,
(index) {
return Text(datas[index].toString());
},
)))
.toList(),
],
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {},
child: const Text('Test'),
),
),
)
],
)),
);
}
The important thing is using SliverFillRemaining with hasScrollBody: false along with Align child.
More about CustomScrollView.

There are multiple heroes that share the same tag within a subtree without using FAB

I am trying to navigate to a route and this exception happen. Have look at my code and I don't think I have a FAB and Hero inside this route. Is it because when you tap on each List item, it will show a dialog with Gridview on it? Someone care to explain to me how can this exception happened? It doesn't produce any error on user thought, just throw an exception.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Daftar Dokter")),
body: ListView.separated(
separatorBuilder: (BuildContext context, int i) => Divider(color: Colors.grey[400]),
itemCount: widget.data.length,
itemBuilder: (context, index) {
Doctor doctor = widget.data[index];
return InkWell(
onTap: (){
_buildDialog(context, scheduleService, doctor.doctorId);
},
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 50,
height: 50,
child: Placeholder(),
),
),
Flexible(
child: SizedBox(
child: ListTile(
title: Text(doctor.name),
subtitle: Text(doctor.specializationName),
),
)
)
],
),
);
}
)
);
}
}
Hope it will solve your issue:
onItem Builder:
itemBuilder: (context, index) {
return Hero(
tag: "itemTag $index",
child: Material(
child: InkWell(
onTap: () {
// _buildDialog(context, scheduleService, doctor.doctorId);
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Wisgets(
tag: "itemTag $index",
)));
},
child: Row(
children: <Widget>[
Text("Item $index"),
],
),
),
),
);
},
Child Widget for row
class Wisgets extends StatelessWidget {
final String tag;
const Wisgets({Key? key, required this.tag}) : super(key: key);
#override
Widget build(BuildContext context) {
return Hero(
tag: tag,
child: Scaffold(
appBar: AppBar(
title: Text("Child"),
),
body: Column(
children: [
Text("got $tag"),
],
),
),
);
}
}

Expanded column with scrolling, floating button and fixed rows

I've been trying to achieve this layout with flutter for many hours, but with no luck
this is what i have so far and it doesn't work
*Important: The fixed rows will have a dynamic height.
Scaffold(
body: Column(
children: [
Container(
child: Text('First row'),
),
Expanded(
child: ListView(shrinkWrap: true, children: [
Stack(
children: [
Container(
child: Column(
children: [
Text(),
Container(),
],
),
),
Positioned(
bottom: 0,
child: Container(
child: Text('Button'),
),
),
],
),
]),
),
Container(
child: Center(child: Text('Footer')
),
)
],
),
),
I do not have much more to say. I don't know how many variants I have tried ... any idea is welcome thanks
In flutter we have app bar and navigation bar, which will not scroll by default and inside you can use columns and rows achieve this type.
Scaffold(
appBar: AppBar(), // top bar
bottomNavigationBar: Container(), // bottom bar which doesn't scroll at least by default
body: SingleChildScrollView(child: Column()),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
));
Flutter has a built-in stationary floating button, called a FloatingActionButton. That should take care of your button needs.
As for the central scrolling section, a ListView inside an Expanded should do the trick. You shouldn't need shrinkWrap when you're inside an Expanded widget, since constraints will be provided to ListView from Expanded during the layout phase of non-fixed size widgets (such as ListView).
Here's a copy/past example:
import 'package:flutter/material.dart';
class FabColRowPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FAB Row Column'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => print('FAB was pressed'),
),
body: Column(
children: [
TopRow(),
Expanded(child: ScrollingBody()),
BottomRow(),
],
),
);
}
}
class TopRow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('TOP ROW'),
);
}
}
class BottomRow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('BOTTOM ROW'),
);
}
}
class ScrollingBody extends StatelessWidget {
final List<String> items = List.generate(20, (index) => 'Item #$index');
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
);
}
}
why not you used floatingAction button in Scaffold
eg: Scaffold(
floatinActionButton:FloatinActionButton(
child:Icon(Icons.add),),
body: Column(
children: [
Container(
child: Text('First row'),
),
Use FloatingActionButton:
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Container(
padding: EdgeInsets.only(bottom: 100),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print('press...');
},
),
),
body: Column(
children: [
Row(........),
Expanded(child: ListView(children: [....])),
Row(........),
]
)
your Scaffold body needs to be like this.

Instagram Profile Header Layout In Flutter

I've been investigating SliverAppBar, CustomScrollView, NestedScrollView, SliverPersistentHeader, and more. I cannot find a way to build something like the Instagram user profile screen's header where only the tab bar is pinned. The main body of the screen is a TabBarView and each pane has a scrollable list.
With SliverAppBar, it is easy to add the TabBar in the bottom parameter. But I want to have an extra widget of unknown/variable height above that TabBar. The extra widget should scroll out of the way when the page is scrolled and and then the TabBar is what is pinned at the top of the screen.
All I could manage was a fixed content before the tab bar and a fixed tab bar. I cannot get the header to scroll up and stick the TabBar at the top just just below the AppBar.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text("pabloaleko"),
),
body: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: <Widget>[
SliverToBoxAdapter(
child: SafeArea(
child: Text("an unknown\namount of content\n goes here in the header"),
),
),
SliverToBoxAdapter(
child: TabBar(
tabs: [
Tab(child: Text('Days', style: TextStyle(color: Colors.black))),
Tab(child: Text('Months', style: TextStyle(color: Colors.black))),
],
),
),
SliverFillRemaining(
child: TabBarView(
children: [
ListView(
children: <Widget>[
ListTile(title: Text('Sunday 1')),
ListTile(title: Text('Monday 2')),
ListTile(title: Text('Tuesday 3')),
ListTile(title: Text('Wednesday 4')),
ListTile(title: Text('Thursday 5')),
ListTile(title: Text('Friday 6')),
ListTile(title: Text('Saturday 7')),
ListTile(title: Text('Sunday 8')),
ListTile(title: Text('Monday 9')),
ListTile(title: Text('Tuesday 10')),
ListTile(title: Text('Wednesday 11')),
ListTile(title: Text('Thursday 12')),
ListTile(title: Text('Friday 13')),
ListTile(title: Text('Saturday 14')),
],
),
ListView(
children: <Widget>[
ListTile(title: Text('January')),
ListTile(title: Text('February')),
ListTile(title: Text('March')),
ListTile(title: Text('April')),
ListTile(title: Text('May')),
ListTile(title: Text('June')),
ListTile(title: Text('July')),
ListTile(title: Text('August')),
ListTile(title: Text('September')),
ListTile(title: Text('October')),
ListTile(title: Text('November')),
ListTile(title: Text('December')),
],
),
],
),
),
],
),
),
);
}
}
You can achieve this behaviour using NestedScrollView with Scaffold.
As we need the widgets between the AppBar and TabBar to be dynamically built and scrolled until TabBar reaches AppBar, use the appBar property of the Scaffold to build your AppBar and use headerSliverBuilder to build other widgets of unknown heights. Use the body property of NestedScrollView to build your tab views.
This way the elements of the headerSliverBuilder would scroll away till the body reaches the bottom of the AppBar.
Might be a little confusing to understand with mere words, here is an example for you.
Code:
// InstaProfilePage
class InstaProfilePage extends StatefulWidget {
#override
_InstaProfilePageState createState() => _InstaProfilePageState();
}
class _InstaProfilePageState extends State<InstaProfilePage> {
double get randHeight => Random().nextInt(100).toDouble();
List<Widget> _randomChildren;
// Children with random heights - You can build your widgets of unknown heights here
// I'm just passing the context in case if any widgets built here needs access to context based data like Theme or MediaQuery
List<Widget> _randomHeightWidgets(BuildContext context) {
_randomChildren ??= List.generate(3, (index) {
final height = randHeight.clamp(
50.0,
MediaQuery.of(context).size.width, // simply using MediaQuery to demonstrate usage of context
);
return Container(
color: Colors.primaries[index],
height: height,
child: Text('Random Height Child ${index + 1}'),
);
});
return _randomChildren;
}
#override
Widget build(BuildContext context) {
return Scaffold(
// Persistent AppBar that never scrolls
appBar: AppBar(
title: Text('AppBar'),
elevation: 0.0,
),
body: DefaultTabController(
length: 2,
child: NestedScrollView(
// allows you to build a list of elements that would be scrolled away till the body reached the top
headerSliverBuilder: (context, _) {
return [
SliverList(
delegate: SliverChildListDelegate(
_randomHeightWidgets(context),
),
),
];
},
// You tab view goes here
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
Expanded(
child: TabBarView(
children: [
GridView.count(
padding: EdgeInsets.zero,
crossAxisCount: 3,
children: Colors.primaries.map((color) {
return Container(color: color, height: 150.0);
}).toList(),
),
ListView(
padding: EdgeInsets.zero,
children: Colors.primaries.map((color) {
return Container(color: color, height: 150.0);
}).toList(),
)
],
),
),
],
),
),
),
);
}
}
Output:
Hope this helps!
Another solution is that you could use a pinned SliverAppBar with FlexibleSpaceBar within DefaultTabController. Sample codes:
Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
floating: true,
pinned: true,
bottom: TabBar(
tabs: [
Tab(text: "Posts"),
Tab(text: "Likes"),
],
),
expandedHeight: 450,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Profile(), // This is where you build the profile part
),
),
];
},
body: TabBarView(
children: [
Container(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
height: 40,
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
Container(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
height: 40,
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
),
),
),
Before scrolling:
After scrolling: