heathy_pet
public
Sep 13, 2024
Never
36
1 // new widget : Positioned, Stack, RichText, and TextSpan 2 // jagan lupa export dulu image png nya di folder assets/images/nama_image.png 3 // klo ga paham..tanya aja, jangan diem 4 5 6 class HomeScreen extends StatelessWidget { 7 const HomeScreen({super.key}); 8 9 @override 10 Widget build(BuildContext context) { 11 return Scaffold( 12 body: Padding( 13 padding: const EdgeInsets.symmetric(horizontal: 20.0), 14 child: ListView( 15 children: [ 16 Row( 17 mainAxisAlignment: MainAxisAlignment.spaceBetween, 18 children: [ 19 Text( 20 'Hello, Human!', 21 style: GoogleFonts.manrope(fontSize: 24, fontWeight: FontWeight.w900), 22 ), 23 Stack( 24 clipBehavior: Clip.none, 25 children: [ 26 const Icon( 27 FeatherIcons.shoppingBag, 28 color: Color(0xff818AF9), 29 size: 24, 30 ), 31 Positioned( 32 left: 15, 33 top: -3, 34 child: Container( 35 width: 14, 36 height: 14, 37 decoration: const BoxDecoration( 38 color: Color(0xffEF6497), 39 shape: BoxShape.circle, 40 ), 41 child: Text( 42 '2', 43 textAlign: TextAlign.center, 44 style: GoogleFonts.mPlus1p( 45 fontSize: 10, 46 fontWeight: FontWeight.w900, 47 color: Colors.white, 48 ), 49 ), 50 ), 51 ), 52 ], 53 ), 54 ], 55 ), 56 const SizedBox( 57 height: 20, 58 ), 59 Container( 60 width: 336, 61 height: 184, 62 decoration: BoxDecoration( 63 color: const Color(0xff818AF9), 64 borderRadius: BorderRadius.circular(14), 65 ), 66 child: Stack( 67 children: [ 68 Image.asset( 69 'assets/images/cat_card.png', 70 fit: BoxFit.cover, 71 width: double.infinity, 72 ), 73 Padding( 74 padding: const EdgeInsets.only(top: 34.0, left: 22), 75 child: Column( 76 crossAxisAlignment: CrossAxisAlignment.start, 77 children: [ 78 RichText( 79 text: const TextSpan( 80 text: 'Your', 81 style: TextStyle( 82 fontSize: 14, 83 fontWeight: FontWeight.normal, 84 ), 85 children: [ 86 TextSpan( 87 text: ' Catrine', 88 style: TextStyle( 89 fontWeight: FontWeight.bold, 90 )), 91 TextSpan(text: ' will get \nvaccination'), 92 TextSpan( 93 text: ' tomorrow \nat 07.00 am!', 94 style: TextStyle( 95 fontWeight: FontWeight.bold, 96 )) 97 ]), 98 ), 99 const SizedBox( 100 height: 20, 101 ), 102 ElevatedButton( 103 onPressed: () {}, 104 style: ElevatedButton.styleFrom( 105 shape: RoundedRectangleBorder( 106 side: BorderSide( 107 width: 2, 108 color: Colors.white.withOpacity(12 / 100), 109 ), 110 borderRadius: BorderRadius.circular(14)), 111 backgroundColor: const Color(0xffFFFFFF).withOpacity(0.6), 112 foregroundColor: Colors.white, 113 padding: const EdgeInsets.symmetric( 114 horizontal: 10, 115 vertical: 10, 116 ), 117 ), 118 child: const Text( 119 'See details', 120 style: TextStyle( 121 fontSize: 12, 122 fontWeight: FontWeight.bold, 123 ), 124 ), 125 ), 126 ], 127 ), 128 ) 129 ], 130 ), 131 ), 132 ], 133 ), 134 ), 135 ); 136 } 137 }