Flutter Fixed Button in CustomScrollView
You can use floatingActionButton
and floatingActionButtonLocation
exam:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
isExtended: true,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
icon: Icon(Icons.supervised_user_circle),
label: Text('Fixed Button'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('list item $index'),
);
},
),
),
],
));
}
}
One Way of Doing it - using - BottomNavigationBar
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>\[
SliverAppBar(
title: Text('Sliver App Bar'),
expandedHeight: 125.0,
),
SliverList(
delegate: SliverChildBuilderDelegate((context, int) {
return Text('Boo');
}, childCount: 65)),
SliverFillRemaining(
child: Text('Foo Text'),
),
\],
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Text('Fixed Button'),
),
),
);
}][1]][1]
OutPut: