import 'package:flutter/material.dart';
class SoloPage extends StatefulWidget {
@override
_SoloPageState createState() => _SoloPageState();
}
class _SoloPageState extends State<SoloPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solo"),
backgroundColor: Colors.blueGrey.shade900,
),
body: SingleChildScrollView(
child: Container(
margin: EdgeInsets.all(10),
height: 220,
width: double.infinity,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50)
)
),
height: 35,
width: double.infinity,
),
Container(
decoration: BoxDecoration(
color: Colors.blueGrey.shade800,
),
margin: EdgeInsets.only(top: 35),
height: 150,
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
children: <Widget>[
Text("Date",
style: TextStyle(
color: Colors.white,
)),
Text("12/10/20",
style: TextStyle(
color: Colors.white,
)),
],
),
Column(
children: <Widget>[
Text("Time",
style: TextStyle(
color: Colors.white,
)),
Text("12:30 PM",
style: TextStyle(
color: Colors.white,
)),
],
),
Column(
children: <Widget>[
Text("Map",
style: TextStyle(
color: Colors.white,
)),
Text("Erangle",
style: TextStyle(
color: Colors.white,
)),
],
),
Column(
children: <Widget>[
Text("Mode",
style: TextStyle(
color: Colors.white,
)),
Text("TPP",
style: TextStyle(
color: Colors.white,
)),
],
)
],
),
Divider(
color: Colors.white,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
children: <Widget>[
Text("Players Joined",
style: TextStyle(
color: Colors.white,
)),
Text("25",
style: TextStyle(
color: Colors.white,
)),
],
),
Column(
children: <Widget>[
Text("Winning Prizes",
style: TextStyle(
color: Colors.white,
)),
Text(""),
],
),
Column(
children: <Widget>[
Text("Remaining Players",
style: TextStyle(
color: Colors.white,
)),
Text("75",
style: TextStyle(
color: Colors.white,
)),
],
)
],
),
Divider(
color: Colors.white,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
children: <Widget>[
Text("Per Kill",
style: TextStyle(
color: Colors.white,
)),
Text("₹ 10",
style: TextStyle(
color: Colors.white,
)),
],
),
Column(
children: <Widget>[
Text("Entry Fees",
style: TextStyle(
color: Colors.white,
)),
Text("₹ 20",
style: TextStyle(
color: Colors.white,
)),
],
),
],
),
],
),
),
Container(
margin: EdgeInsets.only(top: 185),
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(50)),
color: Colors.blueGrey.shade900,
),
child: Center(
child: InkWell(
onTap: () {
print("Solo Joined");
},
child: Text(
"Join Contest",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontFamily: "OpenSans",
fontWeight: FontWeight.bold,
),
),
)),
),
],
),
),
),
);
}
}
I have done the above code to create and design the container and on clicking on the container i want to expand that container and then by clicking on the same text i want to expand that container. There is text Winning Prizes in the container and by clicking on that i want to expand that container.
