Question 79666 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set the width and height of a Outlinebutton in Flutter?

I am new in flutter, how to set width and height OutlineButton in Flutter,
i have to try input width and height inside OutlineButton but got some errors.
this is my code :

OutlinedButton(
  //width: AppSize.DIMEN_230,
  style: OutlinedButton.styleFrom(
    side: BorderSide(
      width: 2.0, color: Colors.black12,
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
  ),),
  onPressed: () {
    showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1880),
        lastDate: DateTime(2050),
    );
  }, child: Text("YYYY/MM/DD HH:MM:SS",
      style: textStyleW400S16.copyWith(
        fontStyle: FontStyle.italic,
        color: Colors.black54,
      ),
),
),

Is it correct? Is there another way to do it?

Tags:

2

Answers


  1. 0

    Wrap your button in SizedBox, and give it width and height.

    SizedBox(
  width: 100,
  height: 100,
  child: OutlinedButton(...),
)
    Login or Signup to reply.
  2. 0

    Try below code, and refer styleFrom for button style and Size-class for set the width and height of the button and as per your comment I have set your text left-side

       OutlinedButton(
           style: OutlinedButton.styleFrom(
              side: const BorderSide(
                width: 2.0,
                color: Colors.black12,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              fixedSize: const Size(300, 50),//change this width & height your requirnment
            ),
          onPressed: () {
            showDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(1880),
              lastDate: DateTime(2050),
            );
          },
          child: const Align(
            alignment: Alignment.centerLeft,
            child: Text(
              "YYYY/MM/DD HH:MM:SS",
            ),
          ),
        ),

    Result-> image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search