Develop Reference

How to overlap the bottom container widget to the clip path container?

This is my code,
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Example',
home: Scaffold(
backgroundColor: Colors.green.shade200,
body: Column(
children: [
ClipPath(
clipBehavior: Clip.antiAlias,
clipper: MyCustomClipper(),
child: Container(
width: 600,
height: 300,
color: Colors.green.shade300,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.shopping_cart_outlined, color: Colors.black87, size: 30,),
Text('Example', style: TextStyle(fontSize: 22, color: Colors.black87,)),
],
),
),
),
Container(
height: 360,
width: 300,
color: Colors.white,
),
],
),
),
);
}
}
this is my clipper class, its just a basic design that we see on every other flutter app,
// clipper class
class MyCustomClipper extends CustomClipper <Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, size.height / 2 );
path.quadraticBezierTo(size.width / 2 , size.height, size.width, size.height / 2 );
path.lineTo( size.width , 0);
return path ;
}
#override
bool shouldReclip(covariant CustomClipper <Path> oldClipper ) {
return true ;
}
}
Current Situation
i really don't know how we can achieve such things
clip-path does not have any padding and margin by default
tried stack but no luck ?
used alignment property no luck
i read on other thread that clipping should be done separately not on the whole widget what does that mean ?

How remove "bottom overflowed by infinity pixels" error when 2 Column are imbricated?

I'm new in Flutter,
I would like to create this
So I created two widget, one with column 1 and its child with column 2.
The problem is that I got this error "bottom overflowed by infinity pixels", despite the height and width defined.
Could you help me please ?
The parent widget:
class LogingPage extends StatelessWidget {
#override
Widget build(BuildContext context){
var size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
width: size.width,
height: size.height,
child: Column(
children: [
brandDisplayContent(),
//buttonsDisplayContent(),
],
),
),
);
}
}
The child widget:
class brandDisplayContent extends StatelessWidget {
#override
Widget build(BuildContext context){
var size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
height: 450,
width: size.width,
padding: EdgeInsets.only(top:200),
color: Color.fromRGBO(132, 119, 240, 100),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
brandText(),
littleTitleText(),
],
)
),
);
}
}
Text brandText(){
return Text(
"BRANDEE",
style: TextStyle(
color: Colors.white,
fontSize: 45,
letterSpacing: 8,
),
textAlign: TextAlign.center,
);
}
Text littleTitleText(){
return Text(
"Play to rise",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
textAlign: TextAlign.center,
);
}

Another approach is to consider using the Expanded widget inside a Column. That way you don't need to get the Size, and just set size as a proportion using the Flex Property.
An example to roughly show a similar layout...
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 3,
child: Container(
color: Colors.red,
child: Column(children: [
Expanded(
flex: 2,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.yellow,
),
),
]),
)),
Expanded(
flex: 2,
child: Container(
color: Colors.blue,
child: Column(
children: [
/// Repeat
],
),
),
)
],
),
);

You can do something like this
Scaffold(
body: SizedBox(
width: size.width,
height: size.height,
child: Column(
children: [
Expanded(
flex: 5,
child: Container(
width: size.width,
padding: EdgeInsets.only(top:size.height*0.2),
color: const Color.fromRGBO(132, 119, 240, 100),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
brandText(),
littleTitleText(),
],
)
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.white,
width: size.width,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
width: size.width*0.6,
decoration: BoxDecoration(
color: const Color.fromRGBO(132, 119, 240, 100),
borderRadius: BorderRadius.circular(50),
),
child: const Center(
child: Text(
'Button One',
style: TextStyle(color: Colors.white),
),
),
),
const SizedBox(height: 20,),
Container(
height: 50,
width: size.width*0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
border: Border.all(color: const Color.fromRGBO(132, 119, 240, 100)),
),
child: const Center(
child: Text(
'Button Two',
style: TextStyle(color: Color.fromRGBO(132, 119, 240, 100)),
),
),
),
],
)
),
),
],
),
),
);

Define height as a percentage height: size.height * .6
Smartphones have different resolutions, and in such cases do not use a fixed height.
#override
Widget build(BuildContext context){
var size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
height: size.height * .6,
width: size.width,
padding: EdgeInsets.only(top:200),
color: Color.fromRGBO(132, 119, 240, 100),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
brandText(),
littleTitleText(),
],
)
),
);
}
and buttonsDisplayContent set height: size.height * .4

How can I force a Widget to take the available Space around it, no matter the shape?

For context, I want to create something like this:
I already am this far:
How can I force the Container(Or any widget, in the end it should work as a different colored button) to take this shape?
This is the code for only the card you see:
class ChooseUsageCardOffline extends StatelessWidget {
final h;
final w;
ChooseUsageCardOffline({this.h, this.w});
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.4,
child: Card(
color: cc.dark_2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
side: BorderSide(color: cc.dark_3),
),
child: FlatButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.fromLTRB(0, h/35, w/100, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Align(
alignment: Alignment.bottomLeft,
child: Text("OFFLINE", style: TextStyle(color: cc.light_1, fontWeight: FontWeight.w500, fontSize: h / 18)
)
),
SizedBox(width: w * 0.23),
Align(
alignment: Alignment.topRight,
child: Icon(Icons.device_hub, size: w * 0.15, color: cc.light_2,)
),
],
),
SizedBox(height: h / 50),
Text("Maximum Security, edit data Anywhere you are", style: TextStyle(color:cc.light_2, fontSize: h/40),),
SizedBox(height: h / 13),
Expanded(
child:Container(color: Colors.blue,)
)
],
),
)
),
),
);
}
}

The problem is that the padding is applied all the children of the column including the lower container.
You need to remove the padding from around the column, and apply it to each widget separately excluding the lower container.
Then, on the Card widget, you need to add a clipBehavior: Clip.hardEdge to get the rounded edges correctly.
Here's a simple example that you can copy and try out on dartpad.dev:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Container(
height: 400,
width: 300,
child: Card(
clipBehavior: Clip.hardEdge,
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
side: BorderSide(color: Colors.blue),
),
child: Column(
children: [
Expanded(child: Container()),
Container(height: 40, color: Colors.red),
],
),
),
),
),
);
}
}

To make your widget resize itself to the boundaries of its parent widget, wrap it with a FittedBox() widget. Check this video on Flutter's official channel for more detail.
The code is like this:
child: FittedBox(
fit: Boxfit.fill, // Since you want it to take the shape of space around it.
child: YourWidget(
//...
),
),

class ChooseUsageCardOffline extends StatelessWidget {
final h;
final w;
ChooseUsageCardOffline({this.h, this.w});
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.4,
child: Card(
color: Colors.red,
clipBehavior: Clip.antiAlias, // Add clip type.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30)),
side: BorderSide(color: Colors.green),
),
child: FlatButton(
padding: EdgeInsets.all(0), // Remove default padding in FlatButton
onPressed: () {},
child: Padding(
padding: EdgeInsets.fromLTRB(0, h/35, w/100, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Align(
alignment: Alignment.bottomLeft,
child: Text("OFFLINE", style: TextStyle(color: Colors.red, fontWeight: FontWeight.w500, fontSize: h / 18)
)
),
SizedBox(width: w * 0.23),
Align(
alignment: Alignment.topRight,
child: Icon(Icons.device_hub, size: w * 0.15, color: Colors.red,)
),
],
),
SizedBox(height: h / 50),
Text("Maximum Security, edit data Anywhere you are", style: TextStyle(color:Colors.red, fontSize: h/40),),
SizedBox(height: h / 13),
Expanded(
child:Container(color: Colors.blue,)
)
],
),
)
),
),
);
}
}

Is it possible to implement widgets using list in flutter?

I am creating a Journal mobile application which would work as a medium to view magazines and daily news updates. This is my first flutter project and I am totally new to flutter. So kindly excuse me if I had said something wrong about something or didnt provide enough information.
I used a code from github for the main page of my application and made few changes to accommodate my needs. Now in my code, the home page consists of a side menu bar and this bar consists of 4 buttons, namely Home, My Profile, Premium and FAQ. The GlobalKeys for the side menu bar is called using a list by the name _keys which is of the type GlobalKey. I tried changing the data type of the list _keys to Widget and then called the corresponding Widgets of the classes. But then two errors popped out.
The getter 'currentContext' isn't defined for the class 'Widget'.
The argument type 'Widget' can't be assigned to the parameter type 'GlobalKey<State>'.
Now I would like the list _keys to be of the type Widget in order for me to call upon it's corresponding widgets of Home, My Profile, Premium and FAQ from each of it's classes in order for me to view the corresponding pages. Or if it is not possible, I would love to know an alternative for it to start working.
Following is the code of my application.
import 'dart:math' as math;
import 'package:flutter/scheduler.dart';
import 'package:google_signin_example/google%20sign%20in/logged_in_widget.dart';
import 'package:google_signin_example/main app/lib/ui_3/TravelBean.dart';
import 'package:google_signin_example/main app/lib/ui_3/magazine/screens/home_screen.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/FAQ/faq.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/Newspaper%20and%20Kiddos/lib_kiddos/main.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/Newspaper%20and%20Kiddos/lib_news/main.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/premium/premium.dart';
import 'package:google_signin_example/widget/sign_up_widget.dart';
import 'detail_page.dart';
class HomePage1 extends StatefulWidget {
#override
_HomePage1State createState() => _HomePage1State();
}
class _HomePage1State extends State<HomePage1> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Row(
children: <Widget>[
LeftWidget(),
Expanded(
child: RightWidget(),
)
],
),
),
);
}
}
class LeftWidget extends StatefulWidget {
#override
_LeftWidgetState createState() => _LeftWidgetState();
}
class _LeftWidgetState extends State<LeftWidget> with TickerProviderStateMixin {
List<String> _list = ["Home", "My profile", "Premium", "FAQ"];
List <Widget> _keys = [
HomePage1(), //These are the widgets from different classes.
LoggedInWidget(),
premium(),
faq(),
/*GlobalKey(), //This was available before I made the changes.
GlobalKey(),
GlobalKey(),
GlobalKey()*/
];
int checkIndex = 0;
Offset checkedPositionOffset = Offset(0, 0);
Offset lastCheckOffset = Offset(0, 0);
Offset animationOffset = Offset(0, 0);
Animation _animation;
AnimationController _animationController;
#override
void initState() {
checkIndex = _list.length - 1;
super.initState();
SchedulerBinding.instance.endOfFrame.then((value) {
calcuteCheckOffset();
addAnimation();
});
}
void calcuteCheckOffset() {
lastCheckOffset = checkedPositionOffset;
RenderBox renderBox = _keys[checkIndex].currentContext.findRenderObject(); //This is where the first error occurs.
Offset widgetOffset = renderBox.localToGlobal(Offset(0, 0));
Size widgetSise = renderBox.size;
checkedPositionOffset = Offset(widgetOffset.dx + widgetSise.width,
widgetOffset.dy + widgetSise.height);
}
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: <Widget>[
Container(
width: 50,
decoration: BoxDecoration(
color: Color(0xff000000),
borderRadius: BorderRadius.circular(30),
),
child: Column(
children: _buildList(),
),
),
Positioned(
top: animationOffset.dy,
left: animationOffset.dx,
child: CustomPaint(
painter: CheckPointPainter(Offset(10, 0)),
),
)
],
),
);
}
List<Widget> _buildList() {
List<Widget> _widget_list = [];
_widget_list.add(Padding(
padding: EdgeInsets.only(
top: 50,
),
child: Icon(
Icons.settings,
color: Colors.white,
size: 30,
),
));
for (int i = 0; i < _list.length; i++) {
_widget_list.add(Expanded(
child: GestureDetector(
onTap: () {
indexChecked(i);
},
child: VerticalText(
_list[i],
_keys[i], //This is where the second error occurs.
checkIndex == i &&
(_animationController != null &&
_animationController.isCompleted))),
));
}
_widget_list.add(Padding(
padding: EdgeInsets.only(
top: 50,
bottom: 50,
),
child: Image(image: AssetImage('assets/images/Voix.png')),
));
return _widget_list;
}
void indexChecked(int i) {
if (checkIndex == i) return;
setState(() {
checkIndex = i;
calcuteCheckOffset();
addAnimation();
});
}
void addAnimation() {
_animationController =
AnimationController(duration: Duration(milliseconds: 300), vsync: this)
..addListener(() {
setState(() {
animationOffset =
Offset(checkedPositionOffset.dx, _animation.value);
});
});
_animation = Tween(begin: lastCheckOffset.dy, end: checkedPositionOffset.dy)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOutBack));
_animationController.forward();
}
}
class CheckPointPainter extends CustomPainter {
double pointRadius = 5;
double radius = 30;
Offset offset;
CheckPointPainter(this.offset);
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..style = PaintingStyle.fill;
double startAngle = -math.pi / 2;
double sweepAngle = math.pi;
paint.color = Color(0xff000000);
canvas.drawArc(
Rect.fromCircle(center: Offset(offset.dx, offset.dy), radius: radius),
startAngle,
sweepAngle,
false,
paint);
paint.color = Color(0xffffffff);
canvas.drawCircle(
Offset(offset.dx - pointRadius / 2, offset.dy - pointRadius / 2),
pointRadius,
paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class VerticalText extends StatelessWidget {
String name;
bool checked;
GlobalKey globalKey;
VerticalText(this.name, this.globalKey, this.checked);
#override
Widget build(BuildContext context) {
return RotatedBox(
key: globalKey,
quarterTurns: 3,
child: Text(
name,
style: TextStyle(
color: checked ? Color(0xffffffff) : Colors.grey,
fontSize: 16,
),
),
);
}
}
class RightWidget extends StatefulWidget {
#override
_RightWidgetState createState() => _RightWidgetState();
}
class _RightWidgetState extends State<RightWidget>
with TickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 5);
}
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
left: 15,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50, left: 20),
child: Text(
"Voix Home",
style: TextStyle(
color: Colors.black,
fontSize: 25,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 15, left: 10),
child: SizedBox(
height: 30,
child: TabBar(
isScrollable: true,
unselectedLabelColor: Colors.black,
labelColor: Color(0xffffffff),
controller: _tabController,
indicator: BoxDecoration(
color: Color(0xff9e9e9e),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
),
),
tabs: <Widget>[
Tab(
text: "Flash",
),
Tab(
text: "Magazine",
),
Tab(
text: "Newspaper",
),
Tab(
text: "Kiddos",
),
Tab(
text: "Editorial",
),
],
),
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
TravelWidget(),
HomeScreen(),
News(),
Kiddos(),
RightBody(),
// RightBody(),
],
),
)
],
),
);
}
}
class RightBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
left: 15,
),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 20,
),
child: Text(
"Flash!",
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 220,
margin: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
image: new DecorationImage(
image: new AssetImage('assets/images/bottom1.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
BoxShadow(
spreadRadius: 5,
blurRadius: 5,
offset: Offset(1, 2),
color: Color(0x33757575),
),
],
),
),
Container(
width: 220,
margin: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
spreadRadius: 5,
blurRadius: 5,
offset: Offset(1, 2),
color: Color(0x33757575),
),
],
),
),
],
),
),
],
),
);
}
}
class TravelWidget extends StatelessWidget {
List<TravelBean> _list = TravelBean.generateTravelBean();
#override
Widget build(BuildContext context) {
return PageView.builder(
controller: PageController(viewportFraction: 0.9),
itemBuilder: (context, index) {
var bean = _list[index];
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return DetailPage(bean);
}));
},
child: Hero(
tag: bean.url,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 30, right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.asset(
bean.url,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: 80,
left: 15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Material(
color: Colors.transparent,
child: Text(
bean.location,
style: TextStyle(
color: Colors.black54,
fontSize: 15,
),
),
),
Material(
color: Colors.transparent,
child: Text(
bean.name,
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
],
),
),
Positioned(
bottom: 0,
right: 30,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(30),
),
child: Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30,
),
),
)
],
),
),
);
},
itemCount: _list.length,
);
}
}
At the beginning, when I leave the list _keys to be of the type GlobalKey and don't comment out the following 4 GlobalKeys I get the output but the side menu bar won't work.
This is my application with GlobalKeys in place of those Widgets
I want those corresponding pages to display when clicked on. But that render object just switches between the options and the same page is displayed.
So kindly help me out.
PS : As said earlier I'm new to flutter, so kindly don't mistake me if I had something wrong.

I suggest you check about flutter state management, especially Mobx with Provider, it will be kind easier for you.

Not able to scroll my screen. Always giving overflow error in flutter app

I am not able to scroll my flutter app body. As it is giving overflow error all the time. Please see the code below and help me.
Body.dart code
import 'package:flutter/material.dart';
import 'CustomGridview.dart';
class MyCustomBody extends StatefulWidget {
#override
_MyCustomBodyState createState() => _MyCustomBodyState();
}
class _MyCustomBodyState extends State<MyCustomBody> {
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return SingleChildScrollView(
child: Column(
children: [
Stack(
overflow: Overflow.visible,
children: [
CustomPaint(
painter: MyCustomPainter(),
child: ClipPath(
clipper: MyCustomClip(),
child: Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
color.custombarG1,
color.custombarG2,
],
),
),
height: height / 2 - 50,
width: width,
),
),
),
Positioned(
left: -40.0,
top: 10.0,
child: Image.asset(
'assets/images/covid3.png',
height: 310.0,
),
),
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(top: 20.0, right: 2.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'CoVID-19',
style: TextStyle(
color: color.writingTitle,
fontSize: 40.0,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Text(
'TRACKER',
style: TextStyle(
color: color.primary,
fontSize: 30.0,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
height: 1.2,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 40),
child: Text(
'+',
style: TextStyle(
color: color.writingHead,
fontSize: 35.0,
height: 0.75,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: Text(
'CASES',
style: TextStyle(
color: color.writingTitle,
fontSize: 30.0,
fontStyle: FontStyle.italic,
),
),
),
Text(
'IN SECONDS',
style: TextStyle(
color: color.writingSubHead,
fontSize: 35.0,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
height: 1.5,
),
),
Text(
'WorldWide',
style: TextStyle(
color: color.writingTitle,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
height: 3.5,
),
),
],
),
),
),
],
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1.5,
child: Card(
color: color.cardTotalBg,
child: Text(
'hello There',
),
),
),
],
),
);
}
}
class MyCustomClip extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = new Path();
path.lineTo(0.0, size.height - 80);
var firstCPoint = new Offset((size.width / 4) - 20, (size.height) / 2 - 50);
var firstEPoint = new Offset((size.width / 2 + 30), size.height - 70);
path.quadraticBezierTo(
firstCPoint.dx, firstCPoint.dy, firstEPoint.dx, firstEPoint.dy);
var secondCPoint = new Offset(size.width * 0.9, size.height + 60);
var secondEPoint = new Offset(size.width, size.height / 2 + 50);
path.quadraticBezierTo(
secondCPoint.dx, secondCPoint.dy, secondEPoint.dx, secondEPoint.dy);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
class MyCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Path path = new Path();
path.lineTo(0.0, size.height - 80);
var firstCPoint = new Offset((size.width / 4) - 20, (size.height) / 2 - 50);
var firstEPoint = new Offset((size.width / 2 + 30), size.height - 70);
path.quadraticBezierTo(
firstCPoint.dx, firstCPoint.dy, firstEPoint.dx, firstEPoint.dy);
var secondCPoint = new Offset(size.width * 0.9, size.height + 60);
var secondEPoint = new Offset(size.width, size.height / 2 + 50);
path.quadraticBezierTo(
secondCPoint.dx, secondCPoint.dy, secondEPoint.dx, secondEPoint.dy);
path.lineTo(size.width, 0.0);
path.close();
canvas.drawShadow(path, color.custombarG2, 30.0, false);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
This is home.dart code
import 'package:CovidTraces/body.dart';
import 'package:CovidTraces/constraints.dart';
import 'package:CovidTraces/customnavbar.dart';
import 'package:flutter/material.dart';
import 'customappbar.dart';
Constraints color = new Constraints();
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
CustomAppBar(),
MyCustomBody(),
],
),
bottomNavigationBar: MyCustomNavBar(),
),
);
}
}
Kindly help me please I am facing a lot of such errors in flutter.
In this I am not able to make my UI scrollable after using single child scroll view also.

Reason for the error:
Column expands to the maximum size in main axis direction (vertical axis), and so does the SingleChildScrollView.
Solutions
So, you need to constrain the height of the SingleChildScrollView. There are many ways of doing it, you can choose that best suits your need.
Use an Expanded widget to allow the SingleChildScrollView take up the remaining space.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
CustomAppBar(),
Expanded(
child: MyCustomBody(),
),
],
),
),
);
}
}
Limit the SingleChildScrollView to certain height using SizedBox
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
CustomAppBar(),
SizedBox(
height: 650,
child: MyCustomBody(),
),
],
),
),
);
}
}
EDIT: It is better to add Appbar to the scaffold instead of a child. Extends the PreferredSize Widget to your CustomAppBar class and put it inside the scaffold.
Sample:
class CustomAppBar extends PreferredSize {
final Widget child;
final double height;
CustomAppBar({#required this.child, this.height = kToolbarHeight});
#override
Size get preferredSize => Size.fromHeight(height);
#override
Widget build(BuildContext context) {
return
Container(
height: preferredSize.height,
alignment: Alignment.center,
child: child,
);
}
}