Home > other >  Flutter borders
Flutter borders

Time:12-29

Hello I very new to Flutter and I am trying to create a button, but I have a problem with this.

This is the code:

Align(
  alignment: AlignmentDirectional(-0.03, 0.13),
  child: FFButtonWidget(
    onPressed: () {
      print('Login pressed ...');
    },
    text: 'Login',
    options: FFButtonOptions(
      width: 130,
      height: 40,
      color: FlutterFlowTheme.of(context).primaryColor,
      textStyle: FlutterFlowTheme.of(context).subtitle2.override(
        fontFamily: 'Poppins',
        color: Colors.white,
      ),
      borderSide: BorderSide(
        color: Colors.transparent,
        width: 1,
      ),
      borderRadius: BorderRadius.circular(8),
    ),
  ),
),

This is the error:

The argument type 'BorderRadius' can't be assigned to the parameter type 'double?'.

Do you have any suggestion?

CodePudding user response:

I think you are using FlutterFlow. Here you don't need to give the border radius like this

borderRadius: BorderRadius.circular(8)

Do it like this

borderRadius: 8

This is because FlutterFlow button widget is not like the usual Flutter button widget. They are modified versions of actual Flutter widgets.

In your case, properties of FFButtonWidget is set using this class

FFButtonOptions()

This class probably takes borderRadius as a double value and internally sets it like this

borderRadius: BorderRadius.circular(8)

So you have to give the required borderRadius as a double value.

CodePudding user response:

The borderRadius field in the FFButtonOptions require a double parameter. Try

borderRadius: 8.0 

It is hard to say, because I do not know how the FFButtonWidget looks like. Normally, your way of setting the border radius would be good for material widgets, for instance:

Align(
  alignment: AlignmentDirectional(-0.03, 0.13),
  child: Container(
    width: 130,
    height: 40,
    decoration: BoxDecoration(
      color: FlutterFlowTheme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(8),
    ),
    child: TextButton(
      onPressed: () {
        print('Login pressed ...');
      },
      child: Text('Login'),
      style: ButtonStyle(
        textStyle: FlutterFlowTheme.of(context).subtitle2.override(
          fontFamily: 'Poppins',
          color: Colors.white,
        ),
      ),
    ),
  ),
),

Probably the FFButtonWidget takes a double parameter and finally transforms it into

borderRadius: BorderRadius.circular(8.0)

But if you want to use material widgets, you can check how the buttons work in Flutter here.

  • Related