Solution 1 :
What you are looking for is ScreenUtil. It resizes widgets based on the screen ratio.
Docs here: https://pub.dev/packages/flutter_screenutil
Add the flutter_screenutil package to ur pubspec file.
Import it to ur dart file and use it like so:
import 'package:flutter_screenutil/flutter_screenutil.dart';
//inside build method
ScreenUtil.init(height: test_device_height, width: test_device_width, enableFontScaling:true);
//That's how you initialise it. Use font scaling to change the font size too!
//Use it in a widget like so:
return Container(
height: ScreenUtil().setHeight(original_height),
width: ScreenUtil().setWidth(original_width);
child: Text("Hello World",
style: TextStyle(
fontSize: ScreenUtil().setSp(original_font_size),
//This is how you set font size,
//or you'll get sizing problems with that too
),
),
);
Problem :
I am new to flutter and i am trying to learn more through youtube videos. I have come across a video that create a onboarding screen for an app. When I run the code provided however (pasted below) I experience the following error when trying to run on android simulator:
I am curious about how to get this to work on both android and ios, as i’m guessing the different available size on each device is behind this problem, i’m thinking MediaQuery.of(context).size.height might be the best way of doing it? I would appreciate if someone could help me out with getting this working. Many thanks. Here is the code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_onboarding_ui/utilities/styles.dart';
class OnboardingScreen extends StatefulWidget {
@override
_OnboardingScreenState createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
final int _numPages = 3;
final PageController _pageController = PageController(initialPage: 0);
int _currentPage = 0;
List<Widget> _buildPageIndicator() {
List<Widget> list = [];
for (int i = 0; i < _numPages; i++) {
list.add(i == _currentPage ? _indicator(true) : _indicator(false));
}
return list;
}
Widget _indicator(bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width: isActive ? 24.0 : 16.0,
decoration: BoxDecoration(
color: isActive ? Colors.white : Color(0xFF7B51D3),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.4, 0.7, 0.9],
colors: [
Color(0xFF3594DD),
Color(0xFF4563DB),
Color(0xFF5036D5),
Color(0xFF5B16D0),
],
),
),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: FlatButton(
onPressed: () => print('Skip'),
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
Container(
height: 600.0,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: <Widget>[
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding0.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Connect peoplenaround the world',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding1.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Live your life smarternwith us!',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/onboarding2.png',
),
height: 300.0,
width: 300.0,
),
),
SizedBox(height: 30.0),
Text(
'Get a new experiencenof imagination',
style: kTitleStyle,
),
SizedBox(height: 15.0),
Text(
'Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
style: kSubtitleStyle,
),
],
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
_currentPage != _numPages - 1
? Expanded(
child: Align(
alignment: FractionalOffset.bottomRight,
child: FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
),
),
SizedBox(width: 10.0),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30.0,
),
],
),
),
),
)
: Text(''),
],
),
),
),
),
bottomSheet: _currentPage == _numPages - 1
? Container(
height: 100.0,
width: double.infinity,
color: Colors.white,
child: GestureDetector(
onTap: () => print('Get started'),
child: Center(
child: Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: Text(
'Get started',
style: TextStyle(
color: Color(0xFF5B16D0),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
)
: Text(''),
);
}
}
Comments
Comment posted by Adithya Shetty
reduce one of that widget by 24 pixels or as you know the answer use
Comment posted by Crazzygamerr
It’ll work, but it’s long and confusing. ScreenUtil is much better. The reason something overflows is beacuse the child widget is bigger than the parent widget.
