Home > other >  How to make the bottom and top height in flutter
How to make the bottom and top height in flutter

Time:12-02

I want to make the top height of my container smaller, so that my calendar is smaller and looks cleaner in general.
The container looks like this: enter image description here

And I want to make the top height (everything above the date of the week) smaller.

My Code for the container is as follows:

child: Column(
              children: <Widget>[
                Container(
                    height: 5.0,
                    width: 0.0,
                    color: Color(0xffF6FECE),
                ),
                Container(
                  padding: EdgeInsets.all(2.0),
                  margin: EdgeInsets.only(right: 5.0, left: 5.0),
                  height: 90.0,
                  decoration: BoxDecoration(
                    color: Color(0xffF6FECE),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      bottomLeft: Radius.circular(20.0),
                      topRight: Radius.circular(20.0),
                      bottomRight: Radius.circular(20.0),
                    ),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      //I commented this cuz I think it looks better without it,
                      //essentially it was something to show month and title
                      // topRow(),
                      Padding(
                        padding: const EdgeInsets.only(top: 26.0),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: List.generate(
                              7,
                              (index) => dateWidget(
                                index: index,
                              ),
                            )),
                      ),
                    ],
                  ),
                ),
.....

and the code for the calendar is:

class dateWidget extends StatefulWidget {
  final index;

  const dateWidget({super.key, required this.index});
  @override
  _dateWidgetState createState() => _dateWidgetState();
}

class _dateWidgetState extends State<dateWidget> {
  bool _selectDate = true;
  var list = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          _selectDate = !_selectDate;
        });
      },
      child: Container(
        decoration: _selectDate
            ? null
            : BoxDecoration(
                color: Color(0xff6f6fff),
                borderRadius: BorderRadius.all(
                  Radius.circular(6.0),
                )),
        padding: EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Text(
              list[widget.index],
              style: TextStyle(
                fontWeight: _selectDate ? FontWeight.normal : FontWeight.bold,
                color: _selectDate ? Colors.blueAccent : Color(0xff8e7daf),
              ),
            ),
            Text(
              "${10   widget.index}",
              style: TextStyle(
                fontWeight: _selectDate ? FontWeight.normal : FontWeight.bold,
                color: _selectDate ? Color(0xff8e7daf) : Colors.white,
              ),
            ),
            Container(
              width: 4.0,
              height: 4.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: _selectDate ? Color(0xff8e7daf) : Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response:

Hello My Friend I Edit The Code And I Hope Is Working

child: Column(
          children: <Widget>[
            Container(
                height: 5.0,
                width: 0.0,
                color: Color(0xffF6FECE),
            ),
            Container(
              padding: EdgeInsets.all(2.0),
              margin: EdgeInsets.only(right: 5.0, left: 5.0),
            // I Change The Height
              height: 80.0,
              decoration: BoxDecoration(
                color: Color(0xffF6FECE),
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  bottomLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                  bottomRight: Radius.circular(20.0),
                ),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  //I commented this cuz I think it looks better without it,
                  //essentially it was something to show month and title
                  // topRow(),
                  Padding(
// I Change The Top Padding
                    padding: const EdgeInsets.only(top: 13.0),
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: List.generate(
                          7,
                          (index) => dateWidget(
                            index: index,
                          ),
                        )),
                  ),
                ],
              ),
            ),
  • Related