[ad_1]
My native language shouldn’t be English, so My english-skill shouldn’t be good.
I discovered a category referred to as FooDecoration on the web and am utilizing it.
FooDecoration replaces BoxDecoration of Container.
I’m having hassle drawing a Container that exists under a Container to which I’ve utilized FooDecoration.
The primary picture reveals the precise scenario.
The second picture is the perfect kind we wish to implement.
picture URL:https://d.kuku.lu/bc290ef11
This code is predominant class.
class ApexTfquiz extends StatelessWidget {
@override
Widget construct(BuildContext context) {
width = MediaQuery.of(context).measurement.width;
top = MediaQuery.of(context).measurement.top;
int num = 1;
return Container(
ornament: BoxDecoration(
gradient: LinearGradient(
colours: [
Color.fromRGBO(250, 101, 107, 1).withOpacity(1.0),
Color.fromRGBO(141, 110, 201, 1).withOpacity(1.0),
],
start: Alignment.topLeft, //ピンク
finish: Alignment.bottomRight, //紫
),
),
youngster: Column(youngsters: <Widget>[
Stack(
children:[
SizedBox(
height: height,
width: width,
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.transparent,
body: FutureBuilder<DocumentSnapshot>(
future: getSnapshot(num),
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return const Text("エラーが発生しました");
}
return Center(
heightFactor:20,
child:Column(
children: [
SizedBox(
height:height*0.09,
),
Container(
child: Container(
height: height*0.5,
width: width,
decoration: FooDecoration(
insets: EdgeInsets.only(top:10, bottom:10, left: 10, right: 10),
blurRadius: 2,
),
child: Container(
child: Center(child: Text(snapshot.data!.get('question'))),
),
),
),
Container( //not worked. why?
height:height*0.2,
width: width,
decoration: BoxDecoration(
color: Colors.red,
),
child:Text(
"aaaaaaa",
style: TextStyle(
color: Colors.black,
),
),
),
],
),
);
}
)
),
),
AppBar(
main: Builder(
builder: (BuildContext context) {
return IconButton(
splashColor: Shade.fromRGBO(250, 101, 107, 0.5),
highlightColor: Shade.fromRGBO(141, 110, 201, 0.5),
splashRadius: 25,
icon: const Icon(Icons.arrow_back_ios),
onPressed: () { Navigator.pop(context); },
);
},
),
foregroundColor: Colours.white.withOpacity(0.85),
backgroundColor: Colours.clear,
elevation: 0,
toolbarHeight: top * 0.08,
titleSpacing: 0,
title: (Textual content(
'〇×クイズ',
)),
),
]
)
]),
);
}
This one is FooDecoration.
class FooDecoration extends Ornament {
last EdgeInsets insets;
last Shade shade;
last double blurRadius;
last bool interior;
FooDecoration({
this.insets = const EdgeInsets.solely(high:10, backside:10, left: 10, proper: 10) ,
this.shade = Colours.black,
this.blurRadius = 2,
this.interior = false,
});
@override
BoxPainter createBoxPainter([void Function()? onChanged]) => _FooBoxPainter(insets, shade, blurRadius, interior);
}
class _FooBoxPainter extends BoxPainter {
last EdgeInsets insets;
last Shade shade;
last double blurRadius;
last bool interior;
_FooBoxPainter(this.insets, this.shade, this.blurRadius, this.interior);
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
var rect = offset & configuration.measurement!;
// Rect rect = const Offset(1.0, 2.0) & const Measurement(3.0, 4.0);
canvas.clipRect(rect);
var paint = Paint()
..shade = shade
..maskFilter = MaskFilter.blur(BlurStyle.outer, blurRadius);
var path = Path();
if (interior) {
path
..fillType = PathFillType.evenOdd
..addRect(insets.inflateRect(rect))
..addRect(rect);
} else {
path.addRect(insets.deflateRect(rect));
}
canvas.drawPath(path, paint);
}
}
I’ve described Container below Container, however for some cause it’s not rendered.
When that is commented out, the Container is drawn accurately.
ornament: FooDecoration(
insets: EdgeInsets.solely(high:10, backside:10, left: 10, proper: 10),
blurRadius: 2,
),
[ad_2]
