Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More UI Update #8

Merged
merged 2 commits into from
Jul 17, 2024
Merged

More UI Update #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab31054
added scrollbar in home page
Sourish-Kanna Jul 17, 2024
ad17a58
Ui Improvement
Sourish-Kanna Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 50 additions & 49 deletions lib/home_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@ class _HomeScreenState extends State<HomeScreen> {
top: 150,
bottom: 0,
width: width,
child: Column(
child: Scrollbar(
trackVisibility: true,
thickness: 5.0,
child: Column(
children: [
pokedex != null ? Expanded(
child: GridView.builder(
Expand Down Expand Up @@ -74,6 +77,7 @@ class _HomeScreenState extends State<HomeScreen> {
],
),
),
),
],
),
);
Expand All @@ -95,37 +99,33 @@ class _HomeScreenState extends State<HomeScreen> {
return json.decode(jsonString);
}

Color getColorByType(String? type) {
switch (type) {
case 'Grass':
return Colors.greenAccent;
case 'Fire':
return Colors.redAccent;
case 'Water':
return Colors.blue;
case 'Electric':
return Colors.yellow;
case 'Rock':
return Colors.grey;
case 'Ground':
return Colors.brown;
case 'Psychic':
return Colors.indigo;
case 'Fighting':
return Colors.orange;
case 'Bug':
return Colors.lightGreenAccent;
case 'Ghost':
return Colors.deepPurple;
case 'Normal':
return Colors.blueGrey;
case 'Poison':
return Colors.deepPurpleAccent;
default:
return Colors.pinkAccent;
}
Color getColorByType(String type) {
const Map<String, Color> colours = {
'normal': const Color(0xFFA8A77A),
'fire': const Color(0xFFEE8130),
'water': const Color(0xFF6390F0),
'electric': const Color(0xFFF7D02C),
'grass': const Color(0xFF7AC74C),
'ice': const Color(0xFF96D9D6),
'fighting': const Color(0xFFC22E28),
'poison': const Color(0xFFA33EA1),
'ground': const Color(0xFFE2BF65),
'flying': const Color(0xFFA98FF3),
'psychic': const Color(0xFFF95587),
'bug': const Color(0xFFA6B91A),
'rock': const Color(0xFFB6A136),
'ghost': const Color(0xFF735797),
'dragon': const Color(0xFF6F35FC),
'dark': const Color(0xFF705746),
'steel': const Color(0xFFB7B7CE),
'fairy': const Color(0xFFD685AD),
};

Color TypeCode = colours[type.toLowerCase()]?? Colors.grey;
return TypeCode;
}


Future<Widget> getPokemonWidget(int index) async {
var pokemonData = await fetchPokemonDetail(index);
return buildPokemonWidget(pokemonData);
Expand Down Expand Up @@ -154,17 +154,19 @@ class _HomeScreenState extends State<HomeScreen> {
Widget buildPokemonWidget(dynamic pokemonData) {
// Extract necessary data from pokemonData and return the Widget
var pokemon = parseJson(prettyJson(pokemonData));
String type = pokemon['types'][0]['type']['name'].toString().capitalize();
String Pokename = pokemon['name'].toString().capitalize();
var typeNames = pokemon['types'].map((item) => item['type']['name']).toList();
String type1 = typeNames.first.toString().capitalize();
String type2 = typeNames.last.toString().capitalize();
String type = typeNames.join(',\n').toString().capitalizeEach();
String id = pokemon['id'].toString();
String Pokename = "#${id} ${pokemon['name'].toString().capitalize()}";
return InkWell(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0, horizontal: 12),
child: Container(
decoration: BoxDecoration(
// color: getColorByType(type),
color: getColorByType(type),
color: getColorByType(type1).withOpacity(0.85),
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
child: Stack(
Expand All @@ -178,8 +180,8 @@ class _HomeScreenState extends State<HomeScreen> {
fit: BoxFit.fitHeight)
),
Positioned(
bottom: -5,
right: -10,
bottom: 0,
right: 0,
// child: Hero(
// tag: int.parse(id),
// child: FutureBuilder<String>(
Expand All @@ -204,7 +206,7 @@ class _HomeScreenState extends State<HomeScreen> {
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CachedNetworkImage(
height: 110,
height: 90,
imageUrl: snapshot.data!,
errorWidget: (context, url, error) =>
Icon(Icons.error),
Expand All @@ -214,27 +216,26 @@ class _HomeScreenState extends State<HomeScreen> {
return Center(child: CircularProgressIndicator());
}
},
)

,
),
),
Positioned(
top: 50,
left: 10,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10)),
color: Colors.black38,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [getColorByType(type1), getColorByType(type2)],
transform: GradientRotation(1.0),
stops: [0.50,0.50],
),
),
child: Padding(
padding: const EdgeInsets.only(left: 4, right: 4,
top: 1, bottom: 1),
child: Text(
type,
style: const TextStyle(
color: Colors.white,
),
child: Text(type,
style: const TextStyle(color: Colors.white,
fontWeight: FontWeight.bold, fontSize: 12),
),
),
),
Expand Down
6 changes: 6 additions & 0 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import 'package:flutter/material.dart';
import 'package:pokemon/home_screen.dart';
import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome;

void main(){
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(Pokedex());
}

Expand Down
104 changes: 75 additions & 29 deletions lib/pokemon_detail_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import 'package:string_capitalize/string_capitalize.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';


class PokemonDetailScreen extends StatefulWidget {
final pokemonDetail;
final Color color;
// final int heroTag;

const PokemonDetailScreen({super.key, this.pokemonDetail, required this.color});
const PokemonDetailScreen({super.key, this.pokemonDetail, required this.color}); //, required this.heroTag});

@override
_PokemonDetailScreenState createState() => _PokemonDetailScreenState();
Expand All @@ -22,22 +23,24 @@ class _PokemonDetailScreenState extends State<PokemonDetailScreen> {
var height = MediaQuery.of(context).size.height;
var pokemon = widget.pokemonDetail;
var typeNames = pokemon['types'].map((item) => item['type']['name']).toList();
String type1 = typeNames.first.toString().capitalize();
String type2 = typeNames.last.toString().capitalize();
String type = typeNames.join(', ').toString().capitalizeEach();
String id = pokemon['id'].toString();
String name = pokemon['name'].toString().capitalize();
String PokeHeight = "${(pokemon['height'] / 10).toString()} m";
String PokeWeight = "${(pokemon['weight'] / 10).toString()} Kg";
print(prettyJson(pokemon));

return Scaffold(
backgroundColor: widget.color,
backgroundColor: getColorByType(type1).withOpacity(0.75),
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 30,
left: 5,
child: IconButton( icon: Icon(Icons.arrow_back, color: Colors.white, size: 30,),onPressed: (){ Navigator.pop(context);
child: IconButton( icon: Icon(Icons.arrow_back, color: Colors.white,
size: 30,),onPressed: (){ Navigator.pop(context);
}),
),

Expand All @@ -54,16 +57,19 @@ class _PokemonDetailScreenState extends State<PokemonDetailScreen> {
left: 20,
child: Container(
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 4.0,bottom: 4.0),
child: Text(type,style: TextStyle(
color: Colors.white
),),
padding: const EdgeInsets.only(left: 8.0, right: 8.0,
top: 4.0,bottom: 4.0),
child: Text(type,style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold, ),),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10),),
color: Colors.black26
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [getColorByType(type1), getColorByType(type2)],
transform: GradientRotation(1.0),
stops: [0.50,0.50],
),
),

),
),

Expand Down Expand Up @@ -268,24 +274,40 @@ class _PokemonDetailScreenState extends State<PokemonDetailScreen> {
Positioned(
top: height * 0.20,
left: (width/2)-100,
child: Hero(
tag: int.parse(id),
child: FutureBuilder<String>(
future: fetchImage(id),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CachedNetworkImage(
height: 200,
imageUrl: snapshot.data!,
errorWidget: (context, url, error) =>
Icon(Icons.error),
fit: BoxFit.fitHeight,
);
} else {
return Center(child: CircularProgressIndicator());
}
},
)
// child: Hero(
// tag: int.parse(id),
// child: FutureBuilder<String>(
// future: fetchImage(id),
// builder: (context, snapshot) {
// if (snapshot.connectionState == ConnectionState.done) {
// return CachedNetworkImage(
// height: 200,
// imageUrl: snapshot.data!,
// errorWidget: (context, url, error) =>
// Icon(Icons.error),
// fit: BoxFit.fitHeight,
// );
// } else {
// return Center(child: CircularProgressIndicator());
// }
// },
// )
// )
child: FutureBuilder<String>(
future: fetchImage(id),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CachedNetworkImage(
height: 200,
imageUrl: snapshot.data!,
errorWidget: (context, url, error) =>
Icon(Icons.error),
fit: BoxFit.fitHeight,
);
} else {
return Center(child: CircularProgressIndicator());
}
},
)
)

Expand All @@ -304,6 +326,30 @@ class _PokemonDetailScreenState extends State<PokemonDetailScreen> {
return encoder.convert(json);
}

Color getColorByType(String type) {
const Map<String, Color> colours = {
'normal': const Color(0xFFA8A77A),
'fire': const Color(0xFFEE8130),
'water': const Color(0xFF6390F0),
'electric': const Color(0xFFF7D02C),
'grass': const Color(0xFF7AC74C),
'ice': const Color(0xFF96D9D6),
'fighting': const Color(0xFFC22E28),
'poison': const Color(0xFFA33EA1),
'ground': const Color(0xFFE2BF65),
'flying': const Color(0xFFA98FF3),
'psychic': const Color(0xFFF95587),
'bug': const Color(0xFFA6B91A),
'rock': const Color(0xFFB6A136),
'ghost': const Color(0xFF735797),
'dragon': const Color(0xFF6F35FC),
'dark': const Color(0xFF705746),
'steel': const Color(0xFFB7B7CE),
'fairy': const Color(0xFFD685AD),
};
Color TypeCode = colours[type.toLowerCase()]?? Colors.grey;
return TypeCode;
}

Future<String> fetchImage( String id) async {
String url = 'https://pokeapi.co/api/v2/pokemon/'+id;
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ dependencies:
pokedex:
http:
cached_network_image:
string_capitalize: ^0.0.10
string_capitalize:


# The following adds the Cupertino Icons font to your application.
Expand Down