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")),
|
||||
body: Row(
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration: Durations.short4,
|
||||
width: model.shouldShowMarkers ? 300 : 0,
|
||||
SizedBox(
|
||||
width: 300,
|
||||
child: Sidebar(model),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
LatLongEditor(
|
||||
latitudeController: model.startLatitudeController,
|
||||
longitudeController: model.startLongitudeController,
|
||||
label: "Start at",
|
||||
isShowingMarkers: model.markerState == MarkerState.start,
|
||||
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}",
|
||||
child: Card(
|
||||
child: Column(
|
||||
children: [
|
||||
LatLongEditor(
|
||||
latitudeController: model.startLatitudeController,
|
||||
longitudeController: model.startLongitudeController,
|
||||
label: "Start at",
|
||||
isShowingMarkers: model.markerState == MarkerState.start,
|
||||
showMarkers: () => model.showMarkers(MarkerState.start),
|
||||
hideMarkers: model.hideMarkers,
|
||||
),
|
||||
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,
|
||||
polylines: {
|
||||
for (final (index, route) in model.routes.indexed) Polyline(
|
||||
polylineId: PolylineId(index.toString()),
|
||||
color: routeColors[index],
|
||||
points: route,
|
||||
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(
|
||||
child: model.isGoogleReady
|
||||
? GoogleMap(
|
||||
onMapCreated: (controller) => model.mapController = controller,
|
||||
initialCameraPosition: const CameraPosition(
|
||||
target: LatLng(42.10125081757972, -75.94181323552698),
|
||||
zoom: 14,
|
||||
),
|
||||
},
|
||||
)
|
||||
: const Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
],
|
||||
markers: model.markers,
|
||||
onTap: model.onMapTapped,
|
||||
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(
|
||||
icon: const Icon(Icons.location_on),
|
||||
const SizedBox(width: 8),
|
||||
if (isShowingMarkers) TextButton(
|
||||
onPressed: hideMarkers,
|
||||
tooltip: "Hide stops on map",
|
||||
) else IconButton(
|
||||
icon: const Icon(Icons.location_off),
|
||||
child: const Text("Cancel"),
|
||||
) else TextButton.icon(
|
||||
icon: const Icon(Icons.location_on),
|
||||
onPressed: showMarkers,
|
||||
tooltip: "Show stops on map",
|
||||
label: const Text("Pick on map"),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -10,9 +10,9 @@ class Sidebar extends ReusableReactiveWidget<HomeModel> {
|
|||
length: 2,
|
||||
child: Card(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
elevation: 8,
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
"Select routes",
|
||||
maxLines: 1,
|
||||
|
@ -26,35 +26,33 @@ class Sidebar extends ReusableReactiveWidget<HomeModel> {
|
|||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
TabBar(
|
||||
if (model.shouldShowMarkers) TabBar(
|
||||
tabs: [
|
||||
for (final (provider, _) in model.providers)
|
||||
Tab(text: provider),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
children: [
|
||||
for (final (_, routesList) in model.providers)
|
||||
ListView(
|
||||
children: [
|
||||
for (final route in routesList) ListTile(
|
||||
title: Text(route, maxLines: 1),
|
||||
subtitle: Text(
|
||||
"${model.stopCounts[route] ?? 0} stops",
|
||||
maxLines: 1,
|
||||
),
|
||||
// Can't use CheckboxListTile, since we must remove the
|
||||
// checkboxes manually to prevent layour errors
|
||||
trailing: !model.shouldShowMarkers ? null : Checkbox(
|
||||
value: model.routesToShow.contains(route),
|
||||
onChanged: (value) => model.showRoute(route, shouldShow: value!),
|
||||
),
|
||||
child: !model.shouldShowMarkers
|
||||
? const Center(child: Text("Choose start or end location"))
|
||||
: TabBarView(
|
||||
children: [
|
||||
for (final (_, routesList) in model.providers)
|
||||
ListView(
|
||||
children: [
|
||||
for (final route in routesList) CheckboxListTile(
|
||||
title: Text(route, maxLines: 1),
|
||||
subtitle: Text(
|
||||
"${model.stopCounts[route] ?? 0} stops",
|
||||
maxLines: 1,
|
||||
),
|
||||
value: model.routesToShow.contains(route),
|
||||
onChanged: (value) => model.showRoute(route, shouldShow: value!),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
Loading…
Reference in a new issue