Flutter中如何调整MonthButton组件的Container高度？

我希望实现仅包含月份的按钮效果，但目前应用中月份区域的Container高度无法提升，达不到预期样式。

当前代码 #

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

解决方案 #

要提升Container的高度，有两种常用方式：

• 设置固定高度：直接给Container添加height属性，比如height: 60，数值可根据目标样式调整
• 添加内边距：给Container设置上下内边距，让内容撑开高度，比如padding: const EdgeInsets.symmetric(vertical: 16)，这种方式更适配不同字体大小

修改后的代码示例（以设置固定高度为例） #

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,
        height: 60, // 新增：设置固定高度
        margin: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          border: Border.all(
            color: widget.isSelected
                ? Colors.blueAccent
                : Colors.black,
          ),
        ),
        child: Center(
          child: Text(
            widget.month,
            style: const TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Alpit Anand