123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411 |
- import 'package:flutter/material.dart';
- import 'package:flutter/services.dart';
- class HomePage extends StatefulWidget {
- @override
- _HomePageState createState() => _HomePageState();
- }
- class _HomePageState extends State<HomePage> {
- Map<String, IconData> map = {
- "Every 7 days": Icons.timelapse,
- "Needs sun": Icons.wb_sunny,
- "Minimum of 1°C": Icons.whatshot
- };
- int selectedSizeIndex = 0;
- List<String> sizeList = ["10\"", "15\"", "20\"", "25\""];
- Widget sizeWidget(int index) {
- return GestureDetector(
- onTap: () {
- selectedSizeIndex = index;
- setState(() {});
- },
- child: Container(
- width: 84,
- height: 84,
- margin: EdgeInsets.only(right: 20),
- decoration: BoxDecoration(
- color: selectedSizeIndex == index ? Colors.white : Color(0xFF0f323b),
- borderRadius: BorderRadius.circular(20),
- ),
- child: Center(
- child: Text(
- sizeList[index],
- style: TextStyle(
- color: selectedSizeIndex == index
- ? Color(0xFF234e51)
- : Color(0xFF68a9bb),
- fontSize: 23,
- fontWeight: FontWeight.bold),
- ),
- ),
- ),
- );
- }
- Widget getDetails(String text, int color) {
- return Container(
- height: 36,
- padding: EdgeInsets.symmetric(horizontal: 3),
- decoration: BoxDecoration(
- color: Color(color), borderRadius: BorderRadius.circular(11)),
- child: Center(
- child: Text(
- text,
- style: TextStyle(color: Colors.white, fontSize: 17),
- ),
- ),
- );
- }
- Widget getRows(String key) {
- return Padding(
- padding: EdgeInsets.only(bottom: 5),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.start,
- children: <Widget>[
- Icon(
- map[key],
- size: 28,
- color: Color(0xFF7bb06d),
- ),
- SizedBox(width: 10),
- Text(
- key,
- style: TextStyle(color: Color(0xFFd8e8eb), fontSize: 20),
- ),
- ],
- ),
- );
- }
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- debugShowCheckedModeBanner: false,
- home: Scaffold(
- backgroundColor: Colors.white,
- body: AnnotatedRegion<SystemUiOverlayStyle>(
- value: SystemUiOverlayStyle.light,
- child: Container(
- width: double.infinity,
- height: double.infinity,
- child: Column(
- children: <Widget>[
- Expanded(
- flex: 7,
- child: ClipRRect(
- borderRadius: BorderRadius.only(
- bottomRight: Radius.circular(55),
- bottomLeft: Radius.circular(55)),
- child: Stack(
- children: <Widget>[
- Container(
- color: Color(0xFF091e25),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: <Widget>[
- Expanded(
- flex: 2,
- child: Container(
- alignment: Alignment.bottomLeft,
- padding:
- EdgeInsets.only(left: 20, bottom: 10),
- child: GestureDetector(
- onTap: () {
- Navigator.pop(context);
- },
- child: Icon(Icons.arrow_back,
- size: 40, color: Color(0xFF7ab06e)),
- ),
- ),
- ),
- Expanded(
- flex: 2,
- child: Container(
- child: Row(
- children: <Widget>[
- Expanded(
- flex: 5,
- child: Container(
- padding: EdgeInsets.only(left: 30),
- alignment: Alignment.centerLeft,
- child: Text(
- "Rubber Tree",
- overflow: TextOverflow.ellipsis,
- maxLines: 1,
- style: TextStyle(
- color: Colors.white,
- fontSize: 36,
- fontWeight: FontWeight.bold),
- ),
- ),
- ),
- Expanded(
- flex: 3,
- child: Container(),
- ),
- ],
- ),
- ),
- ),
- Expanded(
- flex: 2,
- child: Container(
- child: Row(
- children: <Widget>[
- Expanded(
- flex: 4,
- child: Container(
- padding: EdgeInsets.only(left: 30),
- alignment: Alignment.topLeft,
- child: Text(
- "Robust and dramatic, with glossy leaves",
- overflow: TextOverflow.ellipsis,
- maxLines: 3,
- style: TextStyle(
- color: Color(0xFFb0bcc1),
- fontSize: 22,
- ),
- ),
- ),
- ),
- Expanded(
- flex: 3,
- child: Container(),
- ),
- ],
- ),
- ),
- ),
- Expanded(
- flex: 2,
- child: Container(
- child: Row(
- children: <Widget>[
- Expanded(
- flex: 10,
- child: Container(
- margin: EdgeInsets.only(left: 30),
- child: Column(
- mainAxisAlignment:
- MainAxisAlignment.start,
- children: <Widget>[
- Row(
- mainAxisAlignment:
- MainAxisAlignment.start,
- children: <Widget>[
- Expanded(
- child: getDetails(
- "Easy to grow",
- 0xFF71a861),
- ),
- SizedBox(width: 10),
- Expanded(
- child: getDetails(
- "Air cleaner",
- 0xFF4f95a7),
- ),
- ],
- ),
- SizedBox(height: 10),
- Row(
- mainAxisAlignment:
- MainAxisAlignment.start,
- children: <Widget>[
- Expanded(
- child: getDetails(
- "Pet friendly",
- 0xFFa8a96b),
- ),
- SizedBox(width: 10),
- Expanded(
- child: getDetails(
- "26\"-38\"tall",
- 0xFF569476),
- ),
- ],
- ),
- ],
- ),
- ),
- ),
- Expanded(
- flex: 6,
- child: Container(),
- ),
- ],
- ),
- ),
- ),
- Expanded(
- flex: 3,
- child: Container(
- child: Row(
- children: <Widget>[
- Expanded(
- flex: 10,
- child: Container(
- margin: EdgeInsets.symmetric(
- vertical: 10),
- padding: EdgeInsets.only(
- top: 4, left: 40, bottom: 4),
- alignment: Alignment.topCenter,
- decoration: BoxDecoration(
- color: Color(0xFF0f323b),
- borderRadius: BorderRadius.only(
- topRight: Radius.circular(40),
- bottomRight:
- Radius.circular(40)),
- ),
- child: Column(
- mainAxisAlignment:
- MainAxisAlignment.spaceEvenly,
- children:
- map.entries.map((MapEntry map) {
- return getRows(map.key);
- }).toList(),
- ),
- ),
- ),
- Expanded(
- flex: 6,
- child: Container(),
- ),
- ],
- ),
- ),
- ),
- Expanded(
- flex: 3,
- child: Container(
- padding: EdgeInsets.only(
- left: 35, top: 10, bottom: 7),
- child: Column(
- mainAxisAlignment:
- MainAxisAlignment.spaceBetween,
- crossAxisAlignment:
- CrossAxisAlignment.start,
- children: <Widget>[
- Container(
- width: double.infinity,
- child: Text(
- "Choose the size",
- style: TextStyle(
- color: Colors.white,
- fontSize: 29,
- fontWeight: FontWeight.bold),
- ),
- ),
- Container(
- height: 80,
- child: ListView(
- scrollDirection: Axis.horizontal,
- children: sizeList
- .asMap()
- .entries
- .map((MapEntry map) {
- return sizeWidget(map.key);
- }).toList(),
- ),
- )
- ],
- ),
- ),
- ),
- Expanded(
- flex: 1,
- child: Container(),
- ),
- ],
- ),
- ),
- Container(
- width: double.infinity,
- height: double.infinity,
- child: Row(
- children: <Widget>[
- Expanded(
- flex: 5,
- child: Container(),
- ),
- Expanded(
- flex: 4,
- child: Container(
- child: Column(
- children: <Widget>[
- Expanded(
- flex: 1,
- child: Container(),
- ),
- Expanded(
- flex: 11,
- child: Container(
- alignment: Alignment.center,
- child: Stack(
- children: <Widget>[
- Positioned.directional(
- textDirection:
- TextDirection.ltr,
- start: -64,
- top: -156,
- child: Transform.scale(
- scale: 0.63,
- child: Image(
- image: AssetImage(
- "assets/images/plant.jpg"),
- ),
- ),
- ),
- ],
- ),
- ),
- ),
- Expanded(
- flex: 5,
- child: Container(),
- )
- ],
- ),
- ),
- )
- ],
- ),
- )
- ],
- ),
- ),
- ),
- Expanded(
- child: Container(
- child: Center(
- child: RichText(
- text: TextSpan(
- text: 'Add to Cart - ',
- style: TextStyle(
- color: Color(0xFF1c494b),
- fontSize: 28,
- fontWeight: FontWeight.bold),
- children: <TextSpan>[
- TextSpan(
- text: '\$55',
- style: TextStyle(
- color: Color(0xFF6aa558),
- ),
- ),
- ],
- ),
- ),
- ),
- ),
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
- }
|