From d44633624f020c4bfa1b09c6d348ffcda0f6816b Mon Sep 17 00:00:00 2001 From: lit-lalit <75823395+lit-lalit@users.noreply.github.com> Date: Thu, 14 Oct 2021 23:18:37 +0530 Subject: [PATCH] UI Enhancement --- hacktoberfest21_gdsc/lib/avenger_detail.dart | 39 +++--- hacktoberfest21_gdsc/lib/main.dart | 123 ++++++++++++------- 2 files changed, 105 insertions(+), 57 deletions(-) diff --git a/hacktoberfest21_gdsc/lib/avenger_detail.dart b/hacktoberfest21_gdsc/lib/avenger_detail.dart index 7ba71e3..f1e0380 100644 --- a/hacktoberfest21_gdsc/lib/avenger_detail.dart +++ b/hacktoberfest21_gdsc/lib/avenger_detail.dart @@ -15,6 +15,7 @@ class AvengerDetail extends StatelessWidget { left: 10.0, top: MediaQuery.of(context).size.height * 0.12, child: Container( + color: Colors.transparent.withOpacity(0), child: Column( children: [ @@ -44,7 +45,7 @@ class AvengerDetail extends StatelessWidget { child: SizedBox( height: 40, width: 40, - child: Image.asset('assets/icon/GitHub.png')), + child: Image.asset('assets/icon/GitHub.png.png')), ), SizedBox(width: MediaQuery.of(context).size.width * 0.07), InkWell( @@ -82,16 +83,16 @@ class AvengerDetail extends StatelessWidget { alignment: Alignment.topCenter, child: Hero( tag: data.imgURL!, - child: Container( - height: 200.0, - width: 200.0, - decoration: BoxDecoration( - borderRadius: - const BorderRadius.all(Radius.circular(10.0)), - image: DecorationImage( - image: NetworkImage(data.imgURL!), - )), - )), + child: CircleAvatar( + backgroundColor: Colors.teal, + + radius: 105, + child: CircleAvatar( + radius: 100, + backgroundImage: NetworkImage(data.imgURL!), + ), + ) + ), ), ) ], @@ -101,9 +102,18 @@ class AvengerDetail extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.teal.withOpacity(0.9), - appBar: AppBar( - centerTitle: true, - title: Text(data.name!), + appBar: PreferredSize( + + preferredSize: const Size.fromHeight(70), + child: AppBar( + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.vertical( + bottom: Radius.circular(25) + ) + ), + centerTitle: true, + title: Text(data.name!), + ), ), body: Container( child: bodyWidget(context), @@ -114,6 +124,7 @@ class AvengerDetail extends StatelessWidget { child: SizedBox( child: InkWell( child: Container( + color: Colors.teal, height: MediaQuery.of(context).size.height / 20, // ng: EdgeInsets.all(8.0),paddi diff --git a/hacktoberfest21_gdsc/lib/main.dart b/hacktoberfest21_gdsc/lib/main.dart index 672ae15..1bfcea4 100644 --- a/hacktoberfest21_gdsc/lib/main.dart +++ b/hacktoberfest21_gdsc/lib/main.dart @@ -1,3 +1,4 @@ +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:hacktoberfest21_gdsc/avenger_detail.dart'; import 'package:hacktoberfest21_gdsc/models/avengers.dart'; @@ -45,9 +46,19 @@ class _HomePageState extends State { final double itemWidth = size.width / 2; return Scaffold( - appBar: AppBar( - centerTitle: true, - title: const Text("GDSC-Hacktoberfest21"), + appBar: PreferredSize( + + preferredSize: const Size.fromHeight(70), + child: AppBar( + centerTitle: true, + title: const Text("GDSC-Hacktoberfest21"), + shape: const RoundedRectangleBorder( + + borderRadius: BorderRadius.vertical( + bottom: Radius.circular(25), + ) + ), + ), ), body: dataHub == null ? const Center( @@ -64,52 +75,78 @@ class _HomePageState extends State { }, ); }, - child: GridView.count( - crossAxisCount: 2, - childAspectRatio: (itemWidth / itemHeight), - children: dataHub!.data - .map((Data avenge) => Padding( - padding: const EdgeInsets.all(2.0), - child: InkWell( - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => AvengerDetail( - data: avenge, - ))); - }, - child: Card( - elevation: 3.0, - child: Column( - mainAxisAlignment: - MainAxisAlignment.spaceEvenly, - children: [ - Hero( - tag: avenge.imgURL.toString(), - child: Container( - height: - MediaQuery.of(context).size.height / - 4, - decoration: BoxDecoration( - image: DecorationImage( - image: NetworkImage( - avenge.imgURL.toString())), + child: Padding( + padding: const EdgeInsets.only(top:20,left: 10.0,right: 10.0), + child: GridView.count( + crossAxisCount: 2, + childAspectRatio: (itemWidth / itemHeight), + children: dataHub!.data + .map((Data avenge) => Padding( + padding: const EdgeInsets.all(2.0), + child: InkWell( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => AvengerDetail( + data: avenge, + ))); + }, + child: Card( + + shadowColor: Colors.teal, + shape: RoundedRectangleBorder( + side: const BorderSide(color: Colors.teal,width: 1.5), + borderRadius: BorderRadius.circular(22) + ), + elevation: 4.0, + child: Column( + // mainAxisAlignment: + // MainAxisAlignment.start, + children: [ + Hero( + tag: avenge.imgURL.toString(), + child: Padding( + padding: const EdgeInsets.only(left: 10.0,right: 10.0), + child: SizedBox( + // width: + // MediaQuery.of(context).size.width / + // 4, + height: + MediaQuery.of(context).size.height / + 4.2, + // decoration: BoxDecoration( + // image: DecorationImage( + // + // image: NetworkImage( + // avenge.imgURL.toString())), + // ), + child: CircleAvatar( + radius: 90, + backgroundImage:NetworkImage(avenge.imgURL.toString()), + ), + ), ), ), - ), - Text(avenge.name.toString(), - style: const TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.bold)), - ], + Padding( + padding: const EdgeInsets.only(left: 15.0,right: 15.0), + child: Text(avenge.name.toString(), + overflow: TextOverflow.ellipsis, + + style: const TextStyle( + fontSize: 18.0, + fontWeight: FontWeight.bold)), + ), + ], + ), ), ), - ), - )) - .toList()), + )) + .toList()), + ), ), bottomNavigationBar: BottomAppBar( + child: SizedBox( child: InkWell( child: Container(