Flutter UI Demo 1: Using a API

	import 'dart:convert';
	import 'package:flutter/material.dart';
	import 'package:http/http.dart' as http;
	void main() => runApp(MyApp());
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter UI Tests',
	theme: ThemeData(
	primarySwatch: Colors.blue,
	),
	home: MyHomePage(),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	List<int> list = [1, 2, 3, 4, 5];
	int selectedRoomId = 1;
	TextStyle textStyle = TextStyle(
	color: Colors.white, fontSize: 15.0, fontWeight: FontWeight.w400);
	Future<List<User>> users = Future.value([]);
	List<User> selectedUsers = [];
	@override
	void initState() {
	getInitialUserData();
	super.initState();
	}
	void getInitialUserData() async {
	users = fetchUsers();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("UI Demos"),
	centerTitle: true,
	),
	body: Wrap(
	children: <Widget>[
	buildRoomSelectorListView(),
	buildSelectDeselectButtons(),
	buildEducatorGridView(context),
	],
	),
	floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
	floatingActionButton: buildFloatingActionButton(),
	);
	}
	Material buildFloatingActionButton() {
	return Material(
	color: (selectedUsers.isNotEmpty) ? Colors.blueAccent : Colors.grey,
	borderRadius: BorderRadius.circular(20.0),
	child: InkWell(
	onTap: (selectedUsers.isNotEmpty) ? () {
	print(selectedUsers.length);
	// Navigator.of(context).push(MaterialPageRoute(
	// builder: (BuildContext context) => CreateMessage();
	// ));
	} : null,
	child: Container(
	child: Padding(
	padding:
	const EdgeInsets.symmetric(vertical: 12.0, horizontal: 40.0),
	child: Text(
	"Next",
	style: textStyle,
	),
	),
	),
	),
	);
	}
	SizedBox buildRoomSelectorListView() {
	return SizedBox(
	height: 100.0,
	child: ListView(
	scrollDirection: Axis.horizontal,
	children: list.map((f) {
	return buildRoomSelector(f);
	}).toList(),
	),
	);
	}
	Widget buildEducatorGridView(BuildContext context) {
	return Container(
	margin: EdgeInsets.all(4.0),
	height: MediaQuery.of(context).size.height - 120,
	child: FutureBuilder<List<User>>(
	future: users,
	builder: (BuildContext context, AsyncSnapshot<List<User>> snapshot) {
	switch(snapshot.connectionState) {
	case ConnectionState.none:
	return Center(child: Text("Check Connection"));
	case ConnectionState.active:
	case ConnectionState.waiting:
	return Center(child: CircularProgressIndicator());
	case ConnectionState.done:
	if (snapshot.hasError) {
	return Center(child: Text("Error occured!"));
	} else if (snapshot.hasData) {
	return GridView.builder(
	itemCount: snapshot.data.length,
	gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
	crossAxisCount: 4,
	childAspectRatio: MediaQuery.of(context).size.width /
	(MediaQuery.of(context).size.height / 1.5),
	),
	itemBuilder: (BuildContext context, int index) {
	return buildEducatorHolder(snapshot.data[index], context);
	},
	);
	} else {
	return SizedBox();
	}
	break;
	}
	}
	),
	);
	}
	InkWell buildEducatorHolder(User user, BuildContext context) {
	return InkWell(
	onTap: () {
	setState(() {
	if (selectedUsers.contains(user)) {
	selectedUsers.remove(user);
	} else {
	selectedUsers.add(user);
	}
	});
	},
	child: Card(
	color: (selectedUsers.contains(user))
	? Colors.blueAccent.withOpacity(0.5)
	: Theme.of(context).cardColor,
	child: Container(
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	Container(
	width: 62.0,
	height: 62.0,
	child: CircleAvatar(
	backgroundImage: NetworkImage(
	user.avator,
	),
	),
	),
	Padding(
	padding: const EdgeInsets.all(4.0),
	child: Text("${user.firstName} ${user.lastName}",
	overflow: TextOverflow.ellipsis,
	style: textStyle.copyWith(
	fontWeight: FontWeight.w300,
	color: (selectedUsers.contains(user))
	? Colors.white
	: Colors.black)),
	),
	],
	),
	),
	),
	);
	}
	Padding buildSelectDeselectButtons() {
	return Padding(
	padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
	child: Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	Expanded(
	child: RaisedButton(
	color: Colors.blueAccent,
	child: Text(
	"Deselect All",
	style: textStyle,
	),
	onPressed: () {
	setState(() {
	selectedUsers.clear();
	});
	},
	),
	),
	SizedBox(width: 8.0),
	Expanded(
	child: RaisedButton(
	color: Colors.blueAccent,
	child: Text("Select All", style: textStyle),
	onPressed: () {
	users.then((data) {
	setState(() {
	selectedUsers.addAll(data);
	});
	});
	},
	),
	),
	],
	),
	);
	}
	Widget buildRoomSelector(int selectorId) {
	return InkWell(
	onTap: () {
	setState(() {
	selectedRoomId = selectorId;
	});
	users = fetchUsers(roomId: selectedRoomId);
	},
	child: Container(
	margin: EdgeInsets.all(8.0),
	width: 90.0, //MediaQuery.of(context).size.width / 5,
	decoration: BoxDecoration(
	border: (selectorId == selectedRoomId)
	? Border.all(
	color: Colors.blueAccent.withOpacity(0.5), width: 4.0)
	: Border.all(color: Colors.transparent),
	shape: BoxShape.rectangle,
	borderRadius: BorderRadius.circular(10.0),
	image: DecorationImage(
	fit: BoxFit.cover,
	image: NetworkImage(
	"https://robohash.org/$selectorId"),
	),
	),
	),
	);
	}
	Future<List<User>> fetchUsers({int roomId = 1}) async {
	List<User> users = [];
	int dummyToTest = (roomId == 1) ? 50 : (roomId == 2) ? 10 : 5;
	await http.get('https://randomuser.me/api/?results=$dummyToTest').then((result) {
	if (result.statusCode == 200) {
	try {
	var decodedRes = json.decode(result.body);
	users = decodedRes["results"].map<User>((res) => User.fromJson(res)).toList();
	} catch (ex, _) {
	print(ex);
	}
	}
	});
	return users;
	}
	}
	class User {
	final String firstName;
	final String lastName;
	final String gender;
	final String avator;
	User({
	this.firstName,
	this.lastName,
	this.gender,
	this.avator,
	});
	User.fromJson(Map<String, dynamic> json) :
	firstName = json["name"]["first"],
	lastName = json["name"]["last"],
	gender = json["gender"],
	avator = json["picture"]["thumbnail"];
	}

view raw main.dart hosted with ❤ by GitHub

	name: features_testing
	description: A new Flutter application.
	# The following defines the version and build number for your application.
	# A version number is three numbers separated by dots, like 1.2.43
	# followed by an optional build number separated by a +.
	# Both the version and the builder number may be overridden in flutter
	# build by specifying --build-name and --build-number, respectively.
	# Read more about versioning at semver.org.
	version: 1.0.0+1
	environment:
	sdk: ">=2.1.0 <3.0.0"
	dependencies:
	http: ^0.12.0+2
	flutter:
	sdk: flutter
	# The following adds the Cupertino Icons font to your application.
	# Use with the CupertinoIcons class for iOS style icons.
	cupertino_icons: ^0.1.2
	dev_dependencies:
	flutter_test:
	sdk: flutter
	# For information on the generic Dart part of this file, see the
	# following page: https://www.dartlang.org/tools/pub/pubspec
	# The following section is specific to Flutter.
	flutter:
	# The following line ensures that the Material Icons font is
	# included with your application, so that you can use the icons in
	# the material Icons class.
	uses-material-design: true
	# To add assets to your application, add an assets section, like this:
	assets:
	- assets/sample.html
	- assets/iconsetpng/
	# - images/a_dot_burr.jpeg
	# - images/a_dot_ham.jpeg
	# An image asset can refer to one or more resolution-specific "variants", see
	# https://flutter.io/assets-and-images/#resolution-aware.
	# For details regarding adding assets from package dependencies, see
	# https://flutter.io/assets-and-images/#from-packages
	# To add custom fonts to your application, add a fonts section here,
	# in this "flutter" section. Each entry in this list should have a
	# "family" key with the font family name, and a "fonts" key with a
	# list giving the asset and other descriptors for the font. For
	# example:
	# fonts:
	# - family: Schyler
	# fonts:
	# - asset: fonts/Schyler-Regular.ttf
	# - asset: fonts/Schyler-Italic.ttf
	# style: italic
	# - family: Trajan Pro
	# fonts:
	# - asset: fonts/TrajanPro.ttf
	# - asset: fonts/TrajanPro_Bold.ttf
	# weight: 700
	#
	# For details regarding fonts from package dependencies,
	# see https://flutter.io/custom-fonts/#from-packages

view raw pubspec.yaml hosted with ❤ by GitHub