Flutter-拆分日期多行

Question

我想將日期顯示為兩行。 例如，2021 年 12 月 22 日。我想在第一行顯示 22 Dec 並在圓形容器內的第二行顯示 2021。

DateFormat('dd MMM yyyy').format(date) contains dateFormat function

Container(
  width: 70.w,
  height: 70.h,
  decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: (index % 2 == 0) ? Colors.white : dateRoundedDisplay,
              ),
 child: Center(child: Text(dateFormat(date: DateTime.parse(items[index].date))),),)

Answer 1

import 'package:intl/intl.dart';

只需將\n輸入格式為 function

DateTime now = DateTime.now();
formattedDate = DateFormat('dd MMM \n yyyy').format(now);


Center(                   
  child: Text(formattedDate),    
)

                            

Answer 2

您可以通過多種方式做到這一點。 簡單的解決方案是： -

獲取日期時間：

final date = DateTime.now();

獲取單獨day 、 month和year並連接string並傳遞給text小部件。

 Text(
      "${date.day}/${date.month}\n ${date.year}",
      textAlign: TextAlign.center
     ),

注意：不要忘記在月份和年份之間添加\n ，以便year出現在下一行。

這是完整的示例：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'Focus Sample';

  @override
  Widget build(BuildContext context) {
    
    // get the current datetime.
    final date = DateTime.now();
    
    
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(child: Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            shape: BoxShape.circle, 
            color: Colors.red,
          ),
          height: 300,
          width: 300,
          child: Text(
            "${date.day}/${date.month}\n ${date.year}",
            style: const TextStyle(color: Colors.white),
            textAlign: TextAlign.center
          ),
        ),
         )
      ),
    );
  }
}