Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter how to show current date and next 5 day dates?

Tags:

flutter

I need to show current date and month Also next 5 days date and month in a text widget.

Simply like this

                  Column(
                    children: [
                      Text('09'),
                      Text('Nov')
                    ],
                  )

I need to show in a row that today date or month and the next 5 days date and month. Any guide in code how can i do this thing?

Expected output is

28NOV, 29NOV, 30NOV, 1Dec, 2Dec
like image 352
Umaiz Khan Avatar asked Oct 16 '25 18:10

Umaiz Khan


1 Answers

A simple example. No styles applied, adjust to your needs.

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  final _currentDate = DateTime.now();
  final _dayFormatter = DateFormat('d');
  final _monthFormatter = DateFormat('MMM');

  @override
  Widget build(BuildContext context) {
    final dates = <Widget>[];

    for (int i = 0; i < 5; i++) {
      final date = _currentDate.add(Duration(days: i));
      dates.add(Column(
        children: [
          Text(_dayFormatter.format(date)),
          Text(_monthFormatter.format(date)),
        ],
      ));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Tests'),
      ),
      body: Row(
        children: dates.map((widget) => Expanded(child: widget)).toList(),
      ),
    );
  }
}

Also the default month names from the intl library are used. You might need to adjust the code for i18n.

like image 175
Thepeanut Avatar answered Oct 18 '25 09:10

Thepeanut