Flutter: flutter_signin_button overflow issue - flutter

Question

I am using flutter_signin_button package to create Facebook and Apple Sign In buttons for login. However, I am facing overflow issue. Following is my code:
Container(
width: double.infinity,
child: SignInButton(
Buttons.FacebookNew,
onPressed: () => authBloc.loginFacebook(),
),
),
Container(
child: SignInButton(
Buttons.AppleDark,
onPressed: () {},
text: "Apple",
),
),
Padding(
padding: EdgeInsets.only(top: 10),
child: Text("OR",
style: TextStyle(
color: Colors.black,
fontSize: SizeConfig.textMultiplier * 2.2,
fontWeight: FontWeight.w800)),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
),
Container(
width: 205,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Color(0xFF1fd281),
),
onPressed: () => authBloc.loginAnonymous(),
child: Container(
width: 190,
child: Text(
"Play As Guest",
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
),
),
),
The output is in the image below:
I even tried the make the container full width in an attempt to remove this overflow, but still doesn't work. Facing this issue on iPhone 7 Plus only. Not facing this issue on iOS simulator.
As per suggestion by #Sachin Liyanage, I added Expanded and the output is as follows:

Answer 1

Solution 1: Use Expanded or Flexible as a parent of your Container
Expanded(
child:Container(
width: double.infinity,
child: SignInButton(
Buttons.FacebookNew,
onPressed: () => authBloc.loginFacebook(),
),
),
),
Solution 2: Use Card like this, Change the following code according to your need.
Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset('assets/fc-logo.png', width: 56, height: 56),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Flutter Clutter", style: TextStyle(fontSize: 18)),
Text("Internationalization (i18n) in Flutter: an easy and quick approach")
]
),
),
Spacer(),
Text("03.03.2020"),
]
)
)
);
For more ways refer to this - https://www.flutterclutter.dev/flutter/troubleshooting/widget-overflowed-by-pixels/2020/461/
Solution 3: Use AutoSizeText widget for facebook text
Refer to this - https://pub.dev/packages/auto_size_text

Answer 2

no no Use a slivers with custom scrollview and set width via padding like
customScrollview(
slivers:[
SliverAppBar("yourAppBar"),
SliverPAdding(
padding: EdgeInsets.all(24) // give here padding for width you button
sliver:SliverToBoxAdapter(
child: "YourButtton"
)
)
]
);