so basically i'm making a button "add task" for my to-do list app and it shows "right overflowed by 23 pixels"

Here's my "home_page.dart" code for the "add task" button

_addTaskBar(){
  return Container(
   margin: const EdgeInsets.only(left:20, right:20, top:10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(DateFormat.yMMMMd().format(DateTime.now()),
                  style: subHeadingStyle,
                  ),
                  Text("Today",
                  style: headingStyle,
                  )
                ],
              ),
            MyButton(label: "  Add Task", onTap: ()=>null)
          ],
        ),
    );
}

And this is my "button.dart" code for the "add task" button as well

 class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({ Key? key, required this.label, required this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 120,
        height: 60,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: primaryClr
        ),
        child: Text(
          label,
          style: const TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

The result of the code is this enter image description here

I need help to anyone who can solve this issue of mine. Thank you

CodePudding user response：

You can wrap your MyButton widget with SizedBox like this:

SizedBox(
height:70,
width:50,
child:MyButton(label: "  Add Task", onTap: ()=>null)
)

You can also give dynamic height and width using MediaQuery class, you can get information about the current device size, as well as user preferences, and design your layout accordingly

CodePudding user response：

You try here MediaQuery.of(context)(height&width) instead of hard quoted hight width and also try expanded or wrap with flexible widget.

CodePudding user response：

Ok So from the code that you have added i have created an example for you.

As you have not provided the styles for the text, but i have used the max font size to overflow the button from right.

So I have used the Expanded widget for the MyButton class and removed the constant width and height for the AddTask buttons, check the code below you will get it.

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

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: _addTaskBar(),
      ),
    );
  }

  _addTaskBar() {
    return Container(
      margin: const EdgeInsets.only(left: 20, right: 20, top: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                DateFormat.yMMMMd().format(DateTime.now()),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 32,
                ),
              ),
              const Text(
                "Today",
                style: const TextStyle(color: Colors.white),
              )
            ],
          ),
          Expanded(child: MyButton(label: "  Add Task", onTap: () => null))
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({Key? key, required this.label, required this.onTap})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        GestureDetector(
          onTap: onTap,
          child: Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.blue,
            ),
            child: Center(
              child: Text(
                label,
                style: const TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Let me know if it works.

CodePudding user response：

This error is because the size you have given is overflowing meaning that it is not fitting in the screen. Try using params of columns and rows(mainaxisalignment, crossaxisalignment) for getting the widget fit in every screen.