Align AppleSignInButton in center in Column View

user_2225895 0
Viewed 35

I am learning Flutter and have just added the capability to sign in with Apple Sign in and Google Sign in. The buttons are of different size and I want to set the size such that they are proportional to the screen width.

I have tried with a ColumnView, CrossAxisAlignment.center and wrapping the button in a SizedBox.

Button not centered

I have tried some other things, like Expanded but have not had any success with that.

  class LoginView extends StatelessWidget {
    final AppleAuthenticationProvider _appleAuthenticationProvider =
          AppleAuthenticationProvider();

      LoginView({Key? key}) : super(key: key);
      Widget appleButton(BuildContext context) {
        return SignInWithAppleButton(
          style: SignInWithAppleButtonStyle.black,
          onPressed: () {
            _appleAuthenticationProvider.signInWithApple().then((user) {
              if (user != null) {
                loadUserData(user).then((value) {
                  Navigator.of(context).push<void>(
                    MaterialPageRoute<void>(
                      builder: (BuildContext context) {
                        return const MainView();
                      },
                    ),
                  );
                });
              }
            });
          },
        );
      }

    return MaterialApp(
          color: Color.fromARGB(255, 10, 97, 247),
          home: Scaffold(
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [SizedBox(width: 0.9 * deviceWidth, child: appleButton(context))],
            ),
          ),
        );
      }
    }
flutter-layout flutter
2 Answers

wrap your column in a container and color it red, it will show you where the boundaries of the column are to try and further trouble shoot, potentially your width on your column doesn't go across the entire screen, if that is the case you can set your width on the container containing the column to

width: MediaQuery.of(context).size.width

and then try recentering it if the width of the column is the entire width now.

user_157634940

I want to set the size such that they are proportional to the screen width.

There is a widget made just for that: FractionallySizedBox. Just wrap it on your button, give it a widthFactor, and you're all set:

FractionallySizedBox(
  widthFactor: 0.5, // half of the available width
  child: Button(
    ...
)

If you want to center it, you can further wrap it with a Center widget, or set CrossAxisAlignment.center on the Column like you said.

user_10326130
Related