mapflow/flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Load map places from backend
All checks were successful
Build and deploy Flutter Web / build (push) Successful in 3m26s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-05-08 15:54:15 +07:00
parent 4fb691135d
commit 238521b11b
10 changed files with 370 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

495
lib/screens/experience_map_screen.dart
View File

@@ -1,495 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:latlong2/latlong.dart';
import '../models/experience_models.dart';
import '../state/experience_controller.dart';
class ExperienceMapScreen extends ConsumerWidget {
const ExperienceMapScreen({super.key});
static const _initialCenter = LatLng(10.7718, 106.6982);
@override
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(experienceControllerProvider);
final selected = state.selectedExperience;
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
final wide = constraints.maxWidth >= 780;
return Stack(
children: [
FlutterMap(
options: MapOptions(
initialCenter: selected?.coordinate ?? _initialCenter,
initialZoom: 14.2,
minZoom: 3,
maxZoom: 18,
onLongPress: (_, point) =>
_showShareSheet(context, ref, point),
),
children: [
TileLayer(
urlTemplate:
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'com.mapflow.app',
),
MarkerLayer(
markers: [
for (final experience in state.visibleExperiences)
Marker(
width: 54,
height: 54,
point: experience.coordinate,
child: _ExperienceMarker(
experience: experience,
selected: selected?.id == experience.id,
onTap: () => ref
.read(experienceControllerProvider.notifier)
.selectExperience(experience.id),
),
),
],
),
const RichAttributionWidget(
attributions: [
TextSourceAttribution('OpenStreetMap contributors'),
],
),
],
),
SafeArea(
child: Padding(
padding: const EdgeInsets.all(14),
child: Align(
alignment: Alignment.topLeft,
child: _TopPanel(state: state),
),
),
),
if (wide)
SafeArea(
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.all(18),
child: SizedBox(
width: 330,
child: _ExperiencePanel(
experience: selected,
onShare: () => _showShareSheet(
context,
ref,
selected?.coordinate ?? _initialCenter,
),
),
),
),
),
)
else
Align(
alignment: Alignment.bottomCenter,
child: _BottomExperiencePanel(
experience: selected,
onShare: () => _showShareSheet(
context,
ref,
selected?.coordinate ?? _initialCenter,
),
),
),
],
);
},
),
);
}
void _showShareSheet(BuildContext context, WidgetRef ref, LatLng coordinate) {
final placeController = TextEditingController();
final dishController = TextEditingController();
final contextController = TextEditingController();
var emotion = ExperienceEmotion.comfort;
showModalBottomSheet<void>(
context: context,
showDragHandle: true,
isScrollControlled: true,
builder: (sheetContext) {
return StatefulBuilder(
builder: (context, setState) {
return Padding(
padding: EdgeInsets.fromLTRB(
18,
8,
18,
MediaQuery.viewInsetsOf(context).bottom + 18,
),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 560),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Поделиться опытом',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 14),
TextField(
controller: placeController,
decoration: const InputDecoration(labelText: 'Место'),
),
const SizedBox(height: 10),
TextField(
controller: dishController,
decoration: const InputDecoration(labelText: 'Блюдо'),
),
const SizedBox(height: 10),
TextField(
controller: contextController,
minLines: 2,
maxLines: 3,
decoration: const InputDecoration(labelText: 'Контекст'),
),
const SizedBox(height: 12),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (final item in ExperienceEmotion.values)
ChoiceChip(
label: Text(item.label),
selected: emotion == item,
onSelected: (_) => setState(() => emotion = item),
),
],
),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed: () {
ref
.read(experienceControllerProvider.notifier)
.addExperience(
placeName: placeController.text,
dishName: dishController.text,
emotion: emotion,
coordinate: coordinate,
context: contextController.text,
);
Navigator.of(sheetContext).pop();
},
icon: const Icon(Icons.add_location_alt_outlined),
label: const Text('Сохранить'),
),
),
],
),
),
);
},
);
},
).whenComplete(() {
placeController.dispose();
dishController.dispose();
contextController.dispose();
});
}
}
class _TopPanel extends ConsumerWidget {
const _TopPanel({required this.state});
final ExperienceState state;
@override
Widget build(BuildContext context, WidgetRef ref) {
final controller = ref.read(experienceControllerProvider.notifier);
return Material(
color: const Color(0xFFFFFBF5),
borderRadius: BorderRadius.circular(8),
child: Padding(
padding: const EdgeInsets.all(12),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 560),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.map_outlined, size: 22),
const SizedBox(width: 8),
Text(
'MapFlow',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w900,
),
),
],
),
const SizedBox(height: 10),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
FilterChip(
label: const Text('все'),
selected: state.filterEmotion == null,
onSelected: (_) => controller.setEmotionFilter(null),
),
for (final emotion in ExperienceEmotion.values)
FilterChip(
avatar: Icon(emotion.icon, size: 17),
label: Text(emotion.label),
selected: state.filterEmotion == emotion,
onSelected: (_) => controller.setEmotionFilter(emotion),
),
],
),
],
),
),
),
);
}
}
class _BottomExperiencePanel extends StatelessWidget {
const _BottomExperiencePanel({
required this.experience,
required this.onShare,
});
final PlaceExperience? experience;
final VoidCallback onShare;
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
child: _ExperiencePanel(experience: experience, onShare: onShare),
),
);
}
}
class _ExperiencePanel extends StatelessWidget {
const _ExperiencePanel({required this.experience, required this.onShare});
final PlaceExperience? experience;
final VoidCallback onShare;
@override
Widget build(BuildContext context) {
final item = experience;
return Material(
color: const Color(0xFFFFFBF5),
borderRadius: BorderRadius.circular(8),
child: Padding(
padding: const EdgeInsets.all(14),
child: item == null
? FilledButton.icon(
onPressed: onShare,
icon: const Icon(Icons.add_location_alt_outlined),
label: const Text('Поделиться'),
)
: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_EmotionBadge(emotion: item.emotion),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.placeName,
style: Theme.of(context).textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.w900),
),
Text(item.neighborhood),
],
),
),
],
),
const SizedBox(height: 12),
Text(
item.dish.name,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 4),
Text(item.dish.reason),
const SizedBox(height: 8),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_TinyPill(text: item.dish.texture),
_TinyPill(text: item.context),
_TinyPill(text: item.createdLabel),
],
),
const SizedBox(height: 14),
_AuthorBlock(author: item.author),
const SizedBox(height: 14),
SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed: onShare,
icon: const Icon(Icons.add_location_alt_outlined),
label: const Text('Поделиться рядом'),
),
),
],
),
),
);
}
}
class _ExperienceMarker extends StatelessWidget {
const _ExperienceMarker({
required this.experience,
required this.selected,
required this.onTap,
});
final PlaceExperience experience;
final bool selected;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final color = _emotionColor(experience.emotion);
return GestureDetector(
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
decoration: BoxDecoration(
color: selected ? color : Colors.white,
shape: BoxShape.circle,
border: Border.all(color: color, width: selected ? 3 : 2),
boxShadow: const [
BoxShadow(
color: Color(0x33000000),
blurRadius: 14,
offset: Offset(0, 8),
),
],
),
child: Icon(
experience.emotion.icon,
color: selected ? Colors.white : color,
size: 24,
),
),
);
}
}
class _EmotionBadge extends StatelessWidget {
const _EmotionBadge({required this.emotion});
final ExperienceEmotion emotion;
@override
Widget build(BuildContext context) {
final color = _emotionColor(emotion);
return Container(
width: 46,
height: 46,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(8),
),
child: Icon(emotion.icon, color: color),
);
}
}
class _AuthorBlock extends StatelessWidget {
const _AuthorBlock({required this.author});
final ExperienceAuthor author;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
author.name,
style: Theme.of(
context,
).textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w800),
),
const SizedBox(height: 8),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (final facet in author.facets)
_TinyPill(text: '${facet.name}: ${facet.value}'),
],
),
],
);
}
}
class _TinyPill extends StatelessWidget {
const _TinyPill({required this.text});
final String text;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: const Color(0xFFF0E8DA),
borderRadius: BorderRadius.circular(999),
),
child: Text(
text,
style: Theme.of(
context,
).textTheme.labelMedium?.copyWith(fontWeight: FontWeight.w700),
),
);
}
}
Color _emotionColor(ExperienceEmotion emotion) {
return switch (emotion) {
ExperienceEmotion.comfort => const Color(0xFF0F766E),
ExperienceEmotion.energy => const Color(0xFFE11D48),
ExperienceEmotion.curiosity => const Color(0xFF7C3AED),
ExperienceEmotion.tenderness => const Color(0xFFDB2777),
ExperienceEmotion.focus => const Color(0xFF2563EB),
};
}

235
lib/screens/mapflow_shell.dart
View File

@@ -11,11 +11,27 @@ import '../state/place_controller.dart';
class MapflowShell extends ConsumerWidget {
const MapflowShell({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final asyncState = ref.watch(placeControllerProvider);
return asyncState.when(
data: (state) => _MapContent(state: state),
loading: () => const _MapLoading(),
error: (error, _) => _MapError(message: error.toString()),
);
}
}
class _MapContent extends ConsumerWidget {
const _MapContent({required this.state});
static const _center = LatLng(10.7718, 106.6982);
final PlaceState state;
@override
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(placeControllerProvider);
final selected = state.selectedPlace;
return Scaffold(
@@ -101,6 +117,76 @@ class MapflowShell extends ConsumerWidget {
}
}
class _MapLoading extends StatelessWidget {
const _MapLoading();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
FlutterMap(
options: const MapOptions(
initialCenter: LatLng(10.7718, 106.6982),
initialZoom: 14.2,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'com.mapflow.app',
),
],
),
const Center(child: CircularProgressIndicator()),
],
),
);
}
}
class _MapError extends StatelessWidget {
const _MapError({required this.message});
final String message;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
FlutterMap(
options: const MapOptions(
initialCenter: LatLng(10.7718, 106.6982),
initialZoom: 14.2,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'com.mapflow.app',
),
],
),
SafeArea(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(12),
padding: const EdgeInsets.all(12),
color: const Color(0xFFFFFBF5),
child: Text(
message,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
),
),
],
),
);
}
}
class _IntentBar extends ConsumerWidget {
const _IntentBar({required this.intent});
@@ -173,6 +259,10 @@ class _PlaceCarousel extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (places.isEmpty) {
return const SizedBox.shrink();
}
return SizedBox(
height: 172,
child: ListView.separated(
@@ -216,19 +306,25 @@ class _PlacePhotoCard extends StatelessWidget {
child: Stack(
fit: StackFit.expand,
children: [
PageView.builder(
itemCount: place.photoUrls.length,
itemBuilder: (context, index) {
return Image.network(
place.photoUrls[index],
fit: BoxFit.cover,
errorBuilder: (_, _, _) => Container(
color: const Color(0xFFE0D8CA),
child: const Icon(Icons.place_outlined),
),
);
},
),
if (place.photoUrls.isEmpty)
const ColoredBox(
color: Color(0xFF0F766E),
child: Icon(Icons.place_outlined, color: Colors.white),
)
else
PageView.builder(
itemCount: place.photoUrls.length,
itemBuilder: (context, index) {
return Image.network(
place.photoUrls[index],
fit: BoxFit.cover,
errorBuilder: (_, _, _) => Container(
color: const Color(0xFFE0D8CA),
child: const Icon(Icons.place_outlined),
),
);
},
),
const DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
@@ -273,37 +369,23 @@ class _AddExperienceFlowState extends ConsumerState<AddExperienceFlow> {
static const _minimumVoiceSeconds = 30;
Timer? _timer;
late final TextEditingController _placeNameController;
var _step = 0;
var _seconds = 0;
var _recording = false;
_GooglePlaceStub? _selectedGooglePlace;
var _submitting = false;
PlaceRecommendation? _selectedPlace;
static const _nearbyPlaces = [
_GooglePlaceStub(
name: 'Secret Garden',
area: '120 m',
coordinate: LatLng(10.7752, 106.7009),
),
_GooglePlaceStub(
name: 'The Workshop',
area: '210 m',
coordinate: LatLng(10.7740, 106.7042),
),
_GooglePlaceStub(
name: 'L\'Usine',
area: '360 m',
coordinate: LatLng(10.7755, 106.7038),
),
_GooglePlaceStub(
name: 'Oc Dao',
area: '780 m',
coordinate: LatLng(10.7607, 106.6898),
),
];
@override
void initState() {
super.initState();
_placeNameController = TextEditingController();
}
@override
void dispose() {
_timer?.cancel();
_placeNameController.dispose();
super.dispose();
}
@@ -324,6 +406,7 @@ class _AddExperienceFlowState extends ConsumerState<AddExperienceFlow> {
@override
Widget build(BuildContext context) {
final controller = ref.read(placeControllerProvider.notifier);
final places = ref.watch(placeControllerProvider).value?.places ?? [];
final time =
'${(_seconds ~/ 60).toString().padLeft(2, '0')}:'
'${(_seconds % 60).toString().padLeft(2, '0')}';
@@ -331,29 +414,38 @@ class _AddExperienceFlowState extends ConsumerState<AddExperienceFlow> {
final content = switch (_step) {
0 => _IntroStep(onNext: () => setState(() => _step = 1)),
1 => _PlaceStep(
places: _nearbyPlaces,
places: places,
controller: _placeNameController,
onSelect: (place) {
setState(() {
_selectedGooglePlace = place;
_selectedPlace = place;
_placeNameController.text = place.name;
_step = 2;
});
controller.setReviewPlace(place.name);
},
onManualNext: () {
controller.setReviewPlace(_placeNameController.text);
setState(() => _step = 2);
},
),
_ => _VoiceStep(
place: _selectedGooglePlace,
placeName: _placeNameController.text,
seconds: _seconds,
minimumSeconds: _minimumVoiceSeconds,
time: time,
isRecording: _recording,
isSubmitting: _submitting,
canContinue: _seconds >= _minimumVoiceSeconds,
onToggleRecording: _toggleRecording,
onNext: () {
final coordinate =
_selectedGooglePlace?.coordinate ?? widget.coordinate;
controller.setReviewPlace(_selectedGooglePlace?.name ?? '');
controller.analyzeVoiceReview();
controller.publishReview(coordinate: coordinate);
onNext: () async {
setState(() => _submitting = true);
final coordinate = _selectedPlace?.coordinate ?? widget.coordinate;
controller.setReviewPlace(_placeNameController.text);
await controller.publishReview(coordinate: coordinate);
if (!context.mounted) {
return;
}
Navigator.of(context).pop();
},
),
@@ -430,10 +522,17 @@ class _IntroStep extends StatelessWidget {
}
class _PlaceStep extends StatelessWidget {
const _PlaceStep({required this.places, required this.onSelect});
const _PlaceStep({
required this.places,
required this.controller,
required this.onSelect,
required this.onManualNext,
});
final List<_GooglePlaceStub> places;
final ValueChanged<_GooglePlaceStub> onSelect;
final List<PlaceRecommendation> places;
final TextEditingController controller;
final ValueChanged<PlaceRecommendation> onSelect;
final VoidCallback onManualNext;
@override
Widget build(BuildContext context) {
@@ -442,15 +541,19 @@ class _PlaceStep extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Выбери место рядом',
'Место',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w900,
letterSpacing: 0,
),
),
const SizedBox(height: 6),
const Text('Покажем Google Places по твоей геолокации.'),
const SizedBox(height: 16),
TextField(
controller: controller,
decoration: const InputDecoration(hintText: 'Название места'),
textInputAction: TextInputAction.done,
),
const SizedBox(height: 12),
Expanded(
child: ListView.separated(
itemCount: places.length,
@@ -472,34 +575,36 @@ class _PlaceStep extends StatelessWidget {
place.name,
style: const TextStyle(fontWeight: FontWeight.w800),
),
trailing: Text(place.area),
);
},
),
),
],
),
action: FilledButton(onPressed: onManualNext, child: const Text('Далее')),
);
}
}
class _VoiceStep extends StatelessWidget {
const _VoiceStep({
required this.place,
required this.placeName,
required this.seconds,
required this.minimumSeconds,
required this.time,
required this.isRecording,
required this.isSubmitting,
required this.canContinue,
required this.onToggleRecording,
required this.onNext,
});
final _GooglePlaceStub? place;
final String placeName;
final int seconds;
final int minimumSeconds;
final String time;
final bool isRecording;
final bool isSubmitting;
final bool canContinue;
final VoidCallback onToggleRecording;
final VoidCallback onNext;
@@ -511,7 +616,7 @@ class _VoiceStep extends StatelessWidget {
children: [
const Spacer(),
Text(
place?.name ?? 'Место',
placeName.trim().isEmpty ? 'Место' : placeName.trim(),
textAlign: TextAlign.center,
style: Theme.of(
context,
@@ -524,7 +629,7 @@ class _VoiceStep extends StatelessWidget {
width: 132,
height: 132,
child: FilledButton(
onPressed: onToggleRecording,
onPressed: isSubmitting ? null : onToggleRecording,
style: FilledButton.styleFrom(shape: const CircleBorder()),
child: Icon(isRecording ? Icons.stop : Icons.mic, size: 54),
),
@@ -544,8 +649,8 @@ class _VoiceStep extends StatelessWidget {
],
),
action: FilledButton(
onPressed: canContinue ? onNext : null,
child: const Text('Далее'),
onPressed: canContinue && !isSubmitting ? onNext : null,
child: Text(isSubmitting ? 'Отправляем' : 'Далее'),
),
);
}
@@ -614,15 +719,3 @@ class _StoryProgress extends StatelessWidget {
);
}
}
class _GooglePlaceStub {
const _GooglePlaceStub({
required this.name,
required this.area,
required this.coordinate,
});
final String name;
final String area;
final LatLng coordinate;
}