Reputation: 1840
How can I add widget below the card(the circle part)?
@override
Widget build(BuildContext context) {
return SafeArea(
child:
Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 250,
color: Colors.orange,
child: Padding(
padding: EdgeInsets.all(16),
child: Text(
"Report",
style: TextStyle(color: Colors.white, fontSize: 25),
)),
),
),
Positioned(
top: 80,
left: 24,
right: 24,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
child: Padding(
padding: EdgeInsets.all(10),
child: GridView.count(
childAspectRatio: 3 / 2,
padding: EdgeInsets.symmetric(vertical: 0),
shrinkWrap: true,
physics: new NeverScrollableScrollPhysics(),
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
color: const Color(0xff000066),
onPressed: () {},
icon: Icon(Icons.analytics_outlined)),
Text(
"Report A",
style: TextStyle(color: const Color(0xff000066)),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
color: const Color(0xff000066),
icon: Icon(Icons.report_problem_outlined),
onPressed: () {},
),
Text(
"Report B",
style: TextStyle(color: const Color(0xff000066)),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
color: const Color(0xff000066),
icon: Icon(Icons.report),
onPressed: () {},
),
Text("Report C",
style:
TextStyle(color: const Color(0xff000066))),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
color:const Color(0xff000066),
icon: Icon(Icons.work),
onPressed: () {}),
Text("Report D",
style:
TextStyle(color: const Color(0xff000066))),
],
),
],
crossAxisCount: 2,
)),
color: Colors.white,
),
),
),
],
),
);
}
Should I continue using Positioned
or there are others good alternatives?
Upvotes: 0
Views: 238
Reputation: 597
You can use column
for the widget which is at the bottom and give padding
as per your need. then you can continue as usual programming.
Upvotes: 1
Reputation: 8393
You could put your Card and the following Widgets in a Column:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 250,
color: Colors.orange,
child: Padding(
padding: EdgeInsets.all(16),
child: Text(
"Report",
style: TextStyle(color: Colors.white, fontSize: 25),
)),
),
),
Positioned(
top: 80,
left: 24,
right: 24,
child: Column(
children: [
Card(...),
const SizedBox(height: 16.0),
Container(
color: Colors.amber.shade300,
padding: EdgeInsets.all(16.0),
child: Text('My other widget.'),
)
],
),
),
],
),
),
);
}
}
Upvotes: 1