How to achieve this arrangement in Flutter? [closed] - flutter

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 17 days ago.
Improve this question
I wanted to make this design but wanted to know how I can make it in flutter and still be responsive. I was thinking of using a Stack along with a Positioned widget, but it will probably break on bigger/smaller screens.

Answer 1

Stacks could work, but check out what I did:
I created three widgets called RankingWidget which are basically a Column widget containing the image, the name, score and then a CustomPaint shape in the form of the depth of the column (the gray area above), followed by a Container widget that takes the height of the ranking (You can do any desired calculation for it; I'm just giving an example).
These RankingWidget widgets are laid out horizontally using a Row; each of which is wrapped inside an Expanded for better space distribution.
You'd still have to implement some responsive design if you want to render this on multiple form factors, but hopefully this serves as inspiration.
Check out the Gist here; you can visualize it in DartPad, but this is what it will look like:
Full code as well:
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: RankingApp()
),
);
}
}
class RankingApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Expanded(
child: RankingWidget(
image: '',
name: 'Rihana',
score: 12200,
level: 2
),
),
Expanded(
child: RankingWidget(
image: '',
name: 'Elsa',
score: 12320,
level: 1
),
),
Expanded(
child: RankingWidget(
image: '',
name: 'Mesfin',
score: 12100,
level: 3
)
)
]
)
);
}
}
class RankingWidget extends StatelessWidget {
final String image;
final String name;
final double score;
final int level;
const RankingWidget({ super.key,
required this.image,
required this.name,
required this.score,
required this.level
});
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Column(
children: [
ClipOval(
child: Container(
width: 100,
height: 100,
color: Colors.grey
)
),
const SizedBox(height: 10),
Text(name, style: const TextStyle(color: Color(0xFF1A415A), fontWeight: FontWeight.bold)),
const SizedBox(height: 10),
Text('$score', style: const TextStyle(color: Color(0xFF1A415A))),
const SizedBox(height: 10),
]
),
CustomPaint(
child: const SizedBox(height: 50),
painter: RankingTop(rank: level)
),
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFD97931),
Color(0xFFEF9345)
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
height: 300 / level,
alignment: Alignment.center,
padding: const EdgeInsets.all(30),
child: Text('$level',
textAlign: TextAlign.center,
style: TextStyle(color:
Colors.white,
fontSize: (100 / level).toDouble()))
)
]
);
}
}
class RankingTop extends CustomPainter {
final int rank;
const RankingTop({ required this.rank });
#override
void paint(Canvas canvas, Size size) {
var path = Path();
var paint = Paint()
..color = Colors.grey.withOpacity(0.5)
..style = PaintingStyle.fill;
var points = [
rank == 1 || rank == 2 ? Offset(0, size.height) : Offset(0, 0),
Offset(50, 0),
rank == 1 || rank == 3 ? Offset(size.width - 50, 0) : Offset(size.width, 0),
Offset(size.width, size.height),
Offset(0, size.height),
];
path.addPolygon(points, true);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(covariant RankingTop oldDelegate) => false;
}