Made sidebar permanent
This commit is contained in:
parent
575c4f9a16
commit
5e24c8ad30
3 changed files with 83 additions and 84 deletions
|
@ -15,66 +15,67 @@ class HomePage extends ReactiveWidget<HomeModel> {
|
||||||
appBar: AppBar(title: const Text("Counter")),
|
appBar: AppBar(title: const Text("Counter")),
|
||||||
body: Row(
|
body: Row(
|
||||||
children: [
|
children: [
|
||||||
AnimatedContainer(
|
SizedBox(
|
||||||
duration: Durations.short4,
|
width: 300,
|
||||||
width: model.shouldShowMarkers ? 300 : 0,
|
|
||||||
child: Sidebar(model),
|
child: Sidebar(model),
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Column(
|
child: Card(
|
||||||
children: [
|
child: Column(
|
||||||
LatLongEditor(
|
children: [
|
||||||
latitudeController: model.startLatitudeController,
|
LatLongEditor(
|
||||||
longitudeController: model.startLongitudeController,
|
latitudeController: model.startLatitudeController,
|
||||||
label: "Start at",
|
longitudeController: model.startLongitudeController,
|
||||||
isShowingMarkers: model.markerState == MarkerState.start,
|
label: "Start at",
|
||||||
showMarkers: () => model.showMarkers(MarkerState.start),
|
isShowingMarkers: model.markerState == MarkerState.start,
|
||||||
hideMarkers: model.hideMarkers,
|
showMarkers: () => model.showMarkers(MarkerState.start),
|
||||||
),
|
hideMarkers: model.hideMarkers,
|
||||||
const SizedBox(height: 12),
|
|
||||||
LatLongEditor(
|
|
||||||
latitudeController: model.endLatitudeController,
|
|
||||||
longitudeController: model.endLongitudeController,
|
|
||||||
label: "End at",
|
|
||||||
isShowingMarkers: model.markerState == MarkerState.end,
|
|
||||||
showMarkers: () => model.showMarkers(MarkerState.end),
|
|
||||||
hideMarkers: model.hideMarkers,
|
|
||||||
),
|
|
||||||
const SizedBox(height: 24),
|
|
||||||
FilledButton(onPressed: model.search, child: const Text("Search for a path")),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
const Divider(),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
if (model.isLoading)
|
|
||||||
const LinearProgressIndicator()
|
|
||||||
else if (model.isSearching && model.path == null)
|
|
||||||
const Text("Could not connect to API")
|
|
||||||
else
|
|
||||||
for (final step in model.path ?? <PathStep>[]) Text(
|
|
||||||
"Get on at ${step.enter.lat}, ${step.enter.long}\n"
|
|
||||||
"Get off at ${step.exit.lat}, ${step.exit.long}",
|
|
||||||
),
|
),
|
||||||
Expanded(
|
const SizedBox(height: 12),
|
||||||
child: model.isGoogleReady
|
LatLongEditor(
|
||||||
? GoogleMap(
|
latitudeController: model.endLatitudeController,
|
||||||
onMapCreated: (controller) => model.mapController = controller,
|
longitudeController: model.endLongitudeController,
|
||||||
initialCameraPosition: const CameraPosition(
|
label: "End at",
|
||||||
target: LatLng(42.10125081757972, -75.94181323552698),
|
isShowingMarkers: model.markerState == MarkerState.end,
|
||||||
zoom: 14,
|
showMarkers: () => model.showMarkers(MarkerState.end),
|
||||||
),
|
hideMarkers: model.hideMarkers,
|
||||||
markers: model.markers,
|
),
|
||||||
onTap: model.onMapTapped,
|
const SizedBox(height: 24),
|
||||||
polylines: {
|
FilledButton(onPressed: model.search, child: const Text("Search for a path")),
|
||||||
for (final (index, route) in model.routes.indexed) Polyline(
|
const SizedBox(height: 8),
|
||||||
polylineId: PolylineId(index.toString()),
|
const Divider(),
|
||||||
color: routeColors[index],
|
const SizedBox(height: 8),
|
||||||
points: route,
|
if (model.isLoading)
|
||||||
|
const LinearProgressIndicator()
|
||||||
|
else if (model.isSearching && model.path == null)
|
||||||
|
const Text("Could not connect to API")
|
||||||
|
else
|
||||||
|
for (final step in model.path ?? <PathStep>[]) Text(
|
||||||
|
"Get on at ${step.enter.lat}, ${step.enter.long}\n"
|
||||||
|
"Get off at ${step.exit.lat}, ${step.exit.long}",
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: model.isGoogleReady
|
||||||
|
? GoogleMap(
|
||||||
|
onMapCreated: (controller) => model.mapController = controller,
|
||||||
|
initialCameraPosition: const CameraPosition(
|
||||||
|
target: LatLng(42.10125081757972, -75.94181323552698),
|
||||||
|
zoom: 14,
|
||||||
),
|
),
|
||||||
},
|
markers: model.markers,
|
||||||
)
|
onTap: model.onMapTapped,
|
||||||
: const Center(child: CircularProgressIndicator()),
|
polylines: {
|
||||||
),
|
for (final (index, route) in model.routes.indexed) Polyline(
|
||||||
],
|
polylineId: PolylineId(index.toString()),
|
||||||
|
color: routeColors[index],
|
||||||
|
points: route,
|
||||||
|
),
|
||||||
|
},
|
||||||
|
)
|
||||||
|
: const Center(child: CircularProgressIndicator()),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|
|
@ -45,14 +45,14 @@ class LatLongEditor extends StatelessWidget {
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (isShowingMarkers) IconButton(
|
const SizedBox(width: 8),
|
||||||
icon: const Icon(Icons.location_on),
|
if (isShowingMarkers) TextButton(
|
||||||
onPressed: hideMarkers,
|
onPressed: hideMarkers,
|
||||||
tooltip: "Hide stops on map",
|
child: const Text("Cancel"),
|
||||||
) else IconButton(
|
) else TextButton.icon(
|
||||||
icon: const Icon(Icons.location_off),
|
icon: const Icon(Icons.location_on),
|
||||||
onPressed: showMarkers,
|
onPressed: showMarkers,
|
||||||
tooltip: "Show stops on map",
|
label: const Text("Pick on map"),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
|
@ -10,9 +10,9 @@ class Sidebar extends ReusableReactiveWidget<HomeModel> {
|
||||||
length: 2,
|
length: 2,
|
||||||
child: Card(
|
child: Card(
|
||||||
clipBehavior: Clip.hardEdge,
|
clipBehavior: Clip.hardEdge,
|
||||||
elevation: 8,
|
|
||||||
child: Column(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
|
const SizedBox(height: 16),
|
||||||
Text(
|
Text(
|
||||||
"Select routes",
|
"Select routes",
|
||||||
maxLines: 1,
|
maxLines: 1,
|
||||||
|
@ -26,35 +26,33 @@ class Sidebar extends ReusableReactiveWidget<HomeModel> {
|
||||||
textAlign: TextAlign.center,
|
textAlign: TextAlign.center,
|
||||||
),
|
),
|
||||||
const SizedBox(height: 8),
|
const SizedBox(height: 8),
|
||||||
TabBar(
|
if (model.shouldShowMarkers) TabBar(
|
||||||
tabs: [
|
tabs: [
|
||||||
for (final (provider, _) in model.providers)
|
for (final (provider, _) in model.providers)
|
||||||
Tab(text: provider),
|
Tab(text: provider),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: TabBarView(
|
child: !model.shouldShowMarkers
|
||||||
children: [
|
? const Center(child: Text("Choose start or end location"))
|
||||||
for (final (_, routesList) in model.providers)
|
: TabBarView(
|
||||||
ListView(
|
children: [
|
||||||
children: [
|
for (final (_, routesList) in model.providers)
|
||||||
for (final route in routesList) ListTile(
|
ListView(
|
||||||
title: Text(route, maxLines: 1),
|
children: [
|
||||||
subtitle: Text(
|
for (final route in routesList) CheckboxListTile(
|
||||||
"${model.stopCounts[route] ?? 0} stops",
|
title: Text(route, maxLines: 1),
|
||||||
maxLines: 1,
|
subtitle: Text(
|
||||||
),
|
"${model.stopCounts[route] ?? 0} stops",
|
||||||
// Can't use CheckboxListTile, since we must remove the
|
maxLines: 1,
|
||||||
// checkboxes manually to prevent layour errors
|
),
|
||||||
trailing: !model.shouldShowMarkers ? null : Checkbox(
|
value: model.routesToShow.contains(route),
|
||||||
value: model.routesToShow.contains(route),
|
onChanged: (value) => model.showRoute(route, shouldShow: value!),
|
||||||
onChanged: (value) => model.showRoute(route, shouldShow: value!),
|
),
|
||||||
),
|
],
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in a new issue