This is a Flutter UI demo. For more details goto slcoderlk.blogspot.com. Note: I have done everything in one file, so that you guys can copy paste to your main.dart and use. But you can separate to files easily because I have done this function wise.

main.dart

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"];
}

pubspec.yaml

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