我想要一个看起来像这样的东西,里面只有一个月

calender image

现在,我有一些看起来像这样的东西,请查看月份部分.

App image

我无法做到这一点,无法增加容器高度.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:plates/Helpers/constant.dart';
import 'package:plates/pages/ChartScreen/bloc/chart_screen_bloc.dart';

class MonthButton extends StatefulWidget {
  final String month;
  final bool isSelected;
  final VoidCallback onSelect;

  MonthButton(
      {required this.month, required this.isSelected, required this.onSelect});

  @override
  State<MonthButton> createState() => _MonthButtonState();
}

class _MonthButtonState extends State<MonthButton> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
       //some code
      },
      child: Container(
        width: 100, // Adjust the width according to your requirement
        margin: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          border: Border.all(
            color: widget.isSelected
                ? Colors.blueAccent
                : Colors.black, // Apply border color based on selection
          ),
        ),
        child: Center(
          child: Text(
            widget.month,
            style: const TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

推荐答案

try 下面的代码:

SizedBox(
      height: 100,
      child: ListView.builder(
        itemCount: 20,
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
            margin: EdgeInsets.symmetric(horizontal: 5,vertical: 5),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                border: Border.all(color: Colors.grey)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Jun'),
                SizedBox(
                  height: 5,
                ),
                Text('16'),
                SizedBox(
                  height: 5,
                ),
                Text('Mon'),
                SizedBox(
                  height: 5,
                ),
              ],
            ),
          );
        },
      ),
    ),

Result: image

Flutter相关问答推荐

在Flutter中为不受约束的小部件制作动画

如何在flutter文本字段中添加要点条目?

ListTile未正确显示在flutter中

如何将Visual Studio代码中Flutter 应用的包名从com.example.XXX更改为Play Store中受限制的包名称

dart /长笛中的返回早期模式和拆分方法

带有附加图像的ListTile

如何将小部件代码移动到另一个文件以获得更好的可读性

Flutter Web Dio XMLHttpRequest 上传大文件时出错

课程中的访问Provider

从所有设备注销,因为用户帐户已从 firebase flutter 中删除

通过在父窗口小部件功能上设置状态来浏览屏幕

更改下拉按钮的背景 colored颜色 - flutter

无法在Flutter 图像小部件中打开大尺寸(500MB)图像

如何在手势检测器中获得涟漪效应

将一个 Flutter 应用程序集成到另一个 Flutter 应用程序中

如何在 flutter 中更改日期 Select 器 colored颜色 ?

gridview 的所有按钮都应该在Flutter 中适合其父容器

构建失败 - 无法解析 io.grpc:grpc-core:[1.28.0]. (是的,我已经升级到 mavenCentral())

根据索引/变量更改小部件的 colored颜色

如何在 Flutter 中创建类似箭头标签的设计