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

Jump to bottom

Supports category display #12

Merged
merged 1 commit into from Dec 7, 2018
Merged

Supports category display #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 45 additions & 11 deletions lib/mIcons.dart
View file
Open in desktop
@@ -1,19 +1,29 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MIcon {
String key;
int codepoint;
IconData iconData;
String category;

MIcon(
{@required this.key, @required this.codepoint, @required this.iconData});
{@required this.key,
@required this.codepoint,
@required this.iconData,
this.category = ""});
}

class MIcons {
List<MIcon> items = [];
List<String> categories = [];

Future<List<MIcon>> fetchIcons() async {
Map<String, int> _codepoints = {};

MIcons();

Future<Null> fetchCodepoints() async {
String url =
"https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/material/icons.dart";

Expand All @@ -25,17 +35,41 @@ class MIcons {
http.Response res = await http.get(url);
regexp.allMatches(res.body).forEach((match) {
String key = match.group(1);
int codepoint = int.tryParse(match.group(2), radix: 16);
IconData iconData = IconData(codepoint, fontFamily: "MaterialIcons");
this.items.add(
MIcon(
key: key,
codepoint: codepoint,
iconData: iconData,
),
String codepoint = match.group(2);

this._codepoints[key] = int.tryParse(codepoint, radix: 16);
});
}

Future<MIcons> fetch() async {
if (this._codepoints.length == 0) {
await fetchCodepoints();
}

String url = "https://material.io/tools/icons/static/data.json";
http.Response res = await http.get(url);

var json = jsonDecode(res.body);
json["categories"].forEach((category) {
category["icons"].forEach((_icon) {
String key = _icon["id"].toString();
if (this._codepoints.containsKey(key)) {
MIcon icon = MIcon(
key: key,
codepoint: this._codepoints[key],
iconData:
IconData(this._codepoints[key], fontFamily: "MaterialIcons"),
category: category["name"],
);
this.items.add(icon);

if (!this.categories.contains(category["name"])) {
this.categories.add(category["name"]);
}
}
});
});

return this.items;
return this;
}
}
126 changes: 84 additions & 42 deletions lib/main.dart
View file
Open in desktop
Expand Up @@ -11,54 +11,96 @@ class MyApp extends StatelessWidget {
}
}

class MaterialIconsViewer extends StatelessWidget {
class MaterialIconsViewer extends StatefulWidget {
@override
_MaterialIconsViewerState createState() => _MaterialIconsViewerState();
}

class _MaterialIconsViewerState extends State<MaterialIconsViewer> {
List<MIcon> icons;
List<String> categories;

int columnsWidth;

@override
void initState() {
this.columnsWidth = 64;

MIcons().fetch().then((_icons) {
setState(() {
this.icons = _icons.items;
this.categories = _icons.categories;
});
});

super.initState();
}

@override
Widget build(BuildContext context) {
Size deviceSize = MediaQuery.of(context).size;
double columnWidth = 64;
int columnCount = deviceSize.width ~/ columnWidth;
return Scaffold(
appBar: AppBar(
title: Text("Material Icons Viewer"),
),
body: SafeArea(
child: FutureBuilder(
future: MIcons().fetchIcons(),
builder: (context, future) {
if (!future.hasData) {
return Center(child: CircularProgressIndicator());
}

List<MIcon> icons = future.data;
return GridView.builder(
itemCount: icons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columnCount,
int columnCount = deviceSize.width ~/ this.columnsWidth;
return (this.icons == null)
? Center(child: CircularProgressIndicator())
: DefaultTabController(
length: this.categories.length,
child: Scaffold(
appBar: AppBar(
title: Text("Material Icons"),
bottom: TabBar(
isScrollable: true,
tabs: List.generate(this.categories.length, (index) {
return Text(
this.categories[index],
);
}),
),
),
itemBuilder: (context, index) {
MIcon icon = icons[index];
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VIcon(icon: icon),
fullscreenDialog: true,
body: TabBarView(
// physics: PageScrollPhysics(),
children: List.generate(
this.categories.length,
(index) {
List<MIcon> filderedIcons = this
.icons
.where(
(icon) => icon.category == this.categories[index])
.toList();
return SafeArea(
child: GridView.builder(
itemCount: filderedIcons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columnCount,
),
itemBuilder: (context, index) {
MIcon icon = filderedIcons[index];
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VIcon(icon: icon),
fullscreenDialog: true,
),
);
},
child: Card(
child: Hero(
tag: icon.key,
child: Icon(
icon.iconData,
size: this.columnsWidth * 0.8,
),
),
),
);
},
),
);
},
child: Card(
child: Hero(
tag: icon.key,
child: Icon(icon.iconData, size: columnWidth * 0.8),
),
),
);
},
);
},
),
),
);
),
),
),
);
}
}