rework-onboarding (#7)

Onboarding completato, ora super rapido e top

Reviewed-on: http://catelliub.zapto.org:3000/brontomark/flux/pulls/7
Co-authored-by: Mark M2 Macbook <marco@catelli.it>
Co-committed-by: Mark M2 Macbook <marco@catelli.it>
This commit is contained in:
2026-04-22 11:06:02 +02:00
committed by brontomark
parent c5b5b76bd6
commit 90bd5ecacf
47 changed files with 1742 additions and 516 deletions

View File

@@ -0,0 +1,85 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/utils/validators.dart';
import 'package:flux/core/widgets/flux_text_field.dart';
import 'package:flux/features/company/models/company_model.dart';
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
import 'package:flux/features/onboarding/blocs/onboarding_state.dart';
class CompanyOnboardingForm extends StatefulWidget {
final OnboardingState state;
const CompanyOnboardingForm({super.key, required this.state});
@override
State<CompanyOnboardingForm> createState() => _CompanyOnboardingFormState();
}
class _CompanyOnboardingFormState extends State<CompanyOnboardingForm> {
final _formKey = GlobalKey<FormState>();
final _nameCtrl = TextEditingController();
@override
void dispose() {
_nameCtrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
"Iniziamo! 🏢",
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
const Text(
"Come si chiama la tua Azienda? \n(Potrai inserire i dati di fatturazione in seguito).",
style: TextStyle(fontSize: 16, color: Colors.grey),
),
const SizedBox(height: 48),
FluxTextField(
label: 'Ragione Sociale / Nome Azienda',
controller: _nameCtrl,
validator: notEmptyValidator,
keyboardType: TextInputType.name,
textCapitalization: TextCapitalization.words,
autocorrect: false,
onSubmitted: (_) => _submit(),
),
const Spacer(),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
onPressed: () => _submit(),
child: const Text(
"Salva e Prosegui",
style: TextStyle(fontSize: 16),
),
),
const SizedBox(height: 16),
],
),
),
);
}
void _submit() {
if (_formKey.currentState!.validate()) {
context.read<OnboardingCubit>().saveCompany(_nameCtrl.text.trim());
}
}
}

View File

@@ -0,0 +1,115 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/blocs/session/session_cubit.dart';
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
import 'package:flux/features/onboarding/blocs/onboarding_state.dart';
import 'package:flux/features/onboarding/ui/company_onboarding_form.dart';
import 'package:flux/features/onboarding/ui/staff_onboarding_form.dart';
import 'package:flux/features/onboarding/ui/store_onboarding_form.dart';
class OnboardingScreen extends StatefulWidget {
const OnboardingScreen({super.key});
@override
State<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
late PageController _pageController;
@override
void initState() {
super.initState();
// Calcoliamo la pagina iniziale in base allo step salvato nel Cubit
final initialStep = context.read<OnboardingCubit>().state.step;
_pageController = PageController(initialPage: _getPageIndex(initialStep));
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
int _getPageIndex(OnboardingStep step) {
switch (step) {
case OnboardingStep.company:
return 0;
case OnboardingStep.store:
return 1;
case OnboardingStep.staff:
return 2;
default:
return 0;
}
}
@override
Widget build(BuildContext context) {
return BlocConsumer<OnboardingCubit, OnboardingState>(
// Ascoltiamo i cambi di stato per animare la pagina e mostrare errori
listenWhen: (previous, current) =>
previous.step != current.step || previous.error != current.error,
listener: (context, state) {
// Gestione Errori
if (state.error != null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(state.error!), backgroundColor: Colors.red),
);
}
// Se ha finito, non animiamo nulla: il GoRouter prenderà il controllo a breve!
if (state.step == OnboardingStep.completed) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Configurazione completata! Benvenuto a bordo 🚀"),
backgroundColor: Colors.green,
),
);
return;
}
// Animazione cambio pagina
if (state.step != OnboardingStep.completed) {
final targetPage = _getPageIndex(state.step);
if (_pageController.hasClients &&
_pageController.page?.round() != targetPage) {
_pageController.animateToPage(
targetPage,
duration: const Duration(milliseconds: 600),
curve: Curves.easeInOutCubic, // Animazione super fluida
);
}
}
},
builder: (context, state) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
// IL PAGEVIEW CORAZZATO
PageView(
controller: _pageController,
physics:
const NeverScrollableScrollPhysics(), // Vietato lo swipe manuale!
children: [
CompanyOnboardingForm(state: state),
StoreOnboardingForm(state: state),
StaffOnboardingForm(),
],
),
// OVERLAY CARICAMENTO
if (state.isLoading)
Container(
color: Colors.black.withValues(alpha: 0.4),
child: const Center(child: CircularProgressIndicator()),
),
],
),
),
);
},
);
}
}

View File

@@ -0,0 +1,105 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/utils/validators.dart';
import 'package:flux/core/widgets/flux_text_field.dart';
import 'package:flux/features/master_data/staff/models/staff_member_model.dart';
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
class StaffOnboardingForm extends StatefulWidget {
const StaffOnboardingForm({super.key});
@override
State<StaffOnboardingForm> createState() => _StaffOnboardingFormState();
}
class _StaffOnboardingFormState extends State<StaffOnboardingForm> {
final _formKey = GlobalKey<FormState>();
final _nameCtrl = TextEditingController();
final _emailCtrl = TextEditingController();
final _jobTitleCtrl = TextEditingController();
@override
void dispose() {
_nameCtrl.dispose();
_emailCtrl.dispose();
_jobTitleCtrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
"Il tuo Profilo 👤",
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
const Text(
"Ultimo step! Crea il tuo profilo operativo per iniziare a usare FLUX.",
style: TextStyle(fontSize: 16, color: Colors.grey),
),
const SizedBox(height: 48),
FluxTextField(
label: 'Nome',
keyboardType: TextInputType.name,
controller: _nameCtrl,
validator: notEmptyValidator,
textCapitalization: TextCapitalization.words,
autocorrect: false,
),
const SizedBox(height: 16),
FluxTextField(
label: 'Email',
keyboardType: TextInputType.emailAddress,
controller: _emailCtrl,
textCapitalization: TextCapitalization.none,
),
const SizedBox(height: 16),
FluxTextField(
label: 'Etichetta Ruolo (es. Titolare, Manager)',
controller: _jobTitleCtrl,
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.words,
onSubmitted: (_) => _submit(),
),
const Spacer(),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
backgroundColor: Colors.black, // O il tuo context.accent
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
onPressed: () => _submit(),
child: const Text(
"Entra in FLUX",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
const SizedBox(height: 16),
],
),
),
);
}
void _submit() {
if (_formKey.currentState!.validate()) {
final newStaff = StaffMemberModel.empty().copyWith(
name: _nameCtrl.text.trim(),
email: _emailCtrl.text.trim(),
jobTitle: _jobTitleCtrl.text.trim(),
);
context.read<OnboardingCubit>().saveStaff(newStaff);
}
}
}

View File

@@ -0,0 +1,179 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // <-- IMPORTANTE per i formatter
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flux/core/widgets/flux_text_field.dart';
import 'package:flux/features/master_data/store/models/store_model.dart';
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
import 'package:flux/features/onboarding/blocs/onboarding_state.dart';
class StoreOnboardingForm extends StatefulWidget {
final OnboardingState state;
const StoreOnboardingForm({super.key, required this.state});
@override
State<StoreOnboardingForm> createState() => _StoreOnboardingFormState();
}
class _StoreOnboardingFormState extends State<StoreOnboardingForm> {
final _formKey = GlobalKey<FormState>();
final _nameCtrl = TextEditingController();
final _addressCtrl = TextEditingController();
final _cityCtrl = TextEditingController();
final _zipCodeCtrl = TextEditingController();
final _provinceCtrl = TextEditingController();
@override
void dispose() {
_nameCtrl.dispose();
_addressCtrl.dispose();
_cityCtrl.dispose();
_zipCodeCtrl.dispose();
_provinceCtrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(32.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
"Il tuo Negozio 🏪",
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
const Text(
"Dove si trova il tuo punto vendita principale? (Potrai aggiungerne altri in seguito).",
style: TextStyle(fontSize: 16),
),
const SizedBox(height: 32),
FluxTextField(
controller: _nameCtrl,
label: "Nome del Negozio",
keyboardType: TextInputType.name,
validator: (value) =>
value == null || value.isEmpty ? "Obbligatorio" : null,
),
const SizedBox(height: 16),
FluxTextField(
controller: _addressCtrl,
keyboardType: TextInputType.streetAddress,
label: "Indirizzo",
validator: (value) =>
value == null || value.isEmpty ? "Obbligatorio" : null,
),
const SizedBox(height: 16),
// IL LAYOUT RESPONSIVO PREMIUM
LayoutBuilder(
builder: (context, constraints) {
final isDesktop = constraints.maxWidth >= 600;
if (isDesktop) {
// --- DESKTOP: Tutti su una riga ---
return Row(
crossAxisAlignment: CrossAxisAlignment
.start, // Allinea in alto se ci sono errori
children: [
Expanded(flex: 2, child: _buildZipField()),
const SizedBox(width: 16),
Expanded(flex: 5, child: _buildCityField()),
const SizedBox(width: 16),
Expanded(flex: 2, child: _buildProvField()),
],
);
} else {
// --- MOBILE: Comune sopra, CAP e Provincia sotto ---
return Column(
children: [
_buildCityField(),
const SizedBox(height: 16),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(flex: 3, child: _buildZipField()),
const SizedBox(width: 16),
Expanded(flex: 2, child: _buildProvField()),
],
),
],
);
}
},
),
const Spacer(),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
onPressed: () => _submit(),
child: const Text(
"Salva Negozio",
style: TextStyle(fontSize: 16),
),
),
const SizedBox(height: 16),
],
),
),
);
}
void _submit() {
if (_formKey.currentState!.validate()) {
// MIRACOLO DELLA FACTORY EMPTY!
final newStore = StoreModel.empty().copyWith(
nome: _nameCtrl.text.trim(),
indirizzo: _addressCtrl.text.trim(),
comune: _cityCtrl.text.trim(),
cap: _zipCodeCtrl.text.trim(),
// Formattiamo in maiuscolo qui, al momento del salvataggio!
provincia: _provinceCtrl.text.trim().toUpperCase(),
);
context.read<OnboardingCubit>().saveStore(newStore);
}
}
// --- WIDGET ESTRATTI PER PULIZIA ---
Widget _buildCityField() {
return FluxTextField(
label: 'Comune',
controller: _cityCtrl,
keyboardType: TextInputType.name,
);
}
Widget _buildZipField() {
return FluxTextField(
label: 'CAP',
controller: _zipCodeCtrl,
keyboardType: TextInputType.number,
// Trucchetto Premium: Limita i caratteri ma NASCONDE il contatore UI
inputFormatters: [LengthLimitingTextInputFormatter(5)],
);
}
Widget _buildProvField() {
return FluxTextField(
label: 'Prov.',
controller: _provinceCtrl,
keyboardType: TextInputType.text,
// Rende la tastiera del telefono automaticamente maiuscola
textCapitalization: TextCapitalization.characters,
inputFormatters: [LengthLimitingTextInputFormatter(2)],
onSubmitted: (_) => _submit(),
);
}
}