I am working on this app in flutter and I want to change the position of the title of this page so that it sets nicely beside the back button when the Sliver App Bar collapses. It can possibly be done by changing the X Translation values but I don't know how to do it as the user is scrolling. Please help me out. I am attaching a screenshot to make it more clear. Currently the title overlaps the back button. I don't want that I need it to sit beside the button with some space between them
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:gazzup1/constatnts.dart';
import 'package:gazzup1/sample_data.dart';
class StationProfile extends StatefulWidget {
static const String id = "station_profile";
final Station station;
StationProfile({this.station});
@override
_StationProfileState createState() => _StationProfileState();
}
class _StationProfileState extends State<StationProfile> {
DateTime now = DateTime.now();
Future<void> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: now,
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101));
if (picked != null && picked != now)
setState(() {
now = picked;
});
}
@override
Widget build(
BuildContext context,
) {
return Scaffold(
body: new CustomScrollView(
scrollDirection: Axis.vertical,
slivers: [
new SliverAppBar(
expandedHeight: 250,
pinned: true,
flexibleSpace: new FlexibleSpaceBar(
title: Transform(
transform: new Matrix4.translationValues(-40, 0, 0),
child: Text(
widget.station.name,
textAlign: TextAlign.left,
),
),
background: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(.3), BlendMode.srcATop),
child: Image.asset(
widget.station.imageUrl,
fit: BoxFit.fill,
),
),
),
),
SliverFillRemaining(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 10,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
widget.station.address,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
children: [
IconButton(
onPressed: () {},
icon: Icon(
FontAwesomeIcons.star,
size: 25,
),
),
Text(
"4.0",
style: TextStyle(
color: Colors.black,
fontSize: 22,
fontWeight: FontWeight.w600,
),
)
],
)
],
),
SizedBox(
height: 5,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
widget.station.distance,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),
),
),
SizedBox(
height: 20,
),
CustomDivider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
onPressed: () {},
icon: Icon(
FontAwesomeIcons.star,
size: 24,
),
),
IconButton(
onPressed: () {},
icon: Icon(
FontAwesomeIcons.star,
size: 24,
),
),
IconButton(
onPressed: () {},
icon: Icon(
FontAwesomeIcons.star,
size: 24,
),
),
IconButton(
onPressed: () {},
icon: Icon(
FontAwesomeIcons.star,
size: 24,
),
),
IconButton(
onPressed: () {},
icon: Icon(
FontAwesomeIcons.star,
size: 24,
),
),
],
),
CustomDivider(),
SizedBox(
height: 25,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Available Slots",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Select Date:",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(
width: 5.0,
),
RawMaterialButton(
constraints: BoxConstraints(),
onPressed: () => _selectDate(context),
child: Text(
"${now.day}/${now.month}/${now.year}",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.deepOrange),
),
),
],
),
Text(
"See All",
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
),
],
)
],
),
),
)
],
),
floatingActionButton: Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: 250,
height: 55,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
15,
),
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(
4,
7,
),
blurRadius: 4)
],
color: Colors.deepOrange),
margin: EdgeInsets.only(
left: 25.0,
),
child: RawMaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onPressed: () {},
child: Text(
"Book Now",
style: TextStyle(
fontSize: 16.0,
fontFamily: "Cocogoose",
color: Colors.white),
),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: Colors.white,
onPressed: () {},
heroTag: null,
child: Icon(
FontAwesomeIcons.directions,
size: 30,
color: Colors.blueAccent,
),
),
),
],
));
}
}
