Made sidebar permanent

This commit is contained in:
Levi Lesches 2025-05-02 02:55:27 -04:00
parent 575c4f9a16
commit 5e24c8ad30
3 changed files with 83 additions and 84 deletions

View file

@ -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()),
),
],
),
),
),
],

View file

@ -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"),
),
],
),

View file

@ -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!),
),
],
),
],
),
],
),
],
),
),
],
),