Datumväljare

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')
  );
}

Lämna ett svar

Stäng meny