Börja med att installera intl-paketet. Importera det i din dart-fil:
import 'package:intl/intl.dart';
Tanken är att skapa en textruta i användargränssnittet, som visar en datumväljare när man klickar på den och som därefter visar valt datum.
Vi behöver först skapa en TextEditingController() i vår State-klass:
final TextEditingController dateController = TextEditingController();
@override
void dispose() {
super.dispose();
dateController.dispose();
}Sedan skapar vi en funktion som visar datumväljaren och därefter uppdaterar state med det valda datumet.
void _selectDate(BuildContext context) async {
DateTime selectedDate = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.parse('2000-01-01'),
lastDate: DateTime.now()
);
if (selectedDate != null) {
setState(() {
dateController.text = DateFormat('yyyy-MM-dd').format(selectedDate);
});
}
}Sista steget blir att lägga in textrutan någonstans i användargränssnittet:
TextField(
onTap: () => _selectDate(context),
decoration: InputDecoration(
hintText: 'Datum'
),
controller: dateController
)Svensk kalender
För att få veckodagar och månadsnamn, samt veckostart på måndagar, behöver man lägga till svensk localization. Börja med att installera paketet Easy Localization.
Lägg till följande kod i main:
import 'package:flutter_localizations/flutter_localizations.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate
],
supportedLocales: [
const Locale('en'),
const Locale('sv')
]
);
}
}Nu kan du på din showDatePicker() lägga till attributet locale:
void _selectDate(BuildContext context) async {
DateTime selectedDate = await showDatePicker(
context: context,
locale: const Locale('sv', 'SE')
);
}