booking_prototype.dart

import 'package:flutter/material.dart';
import 'package:letutor/mock_data.dart';

class BookAppointment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = Padding(
      padding: EdgeInsets.only(top: 20.0, left: 12.0),
      child: Text(
        "Create Appointment",
        style: TextStyle(
          fontSize: 22.0,
          fontWeight: FontWeight.w700,
        ),
      ),
    );

    var modalityItems = Container(
      height: 50.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: modalities.length,
        itemBuilder: (BuildContext context, int index) {
          String modality = modalities[index];
          return GestureDetector(
            onTap: () => {},
            child: Container(
              margin: EdgeInsets.all(5.0),
              child: FlatButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5)),
                color: Color(0xFF21BFBD),
                child: Text(
                  modality,
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
          );
        },
      ),
    );

    var courseItems = Container(
      height: 150,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: courses.length,
          itemBuilder: (BuildContext context, int index) {
            String course = courses[index];
            return GestureDetector(
              onTap: () {},
              child: Container(
                  width: 130,
                  margin: EdgeInsets.all(10.0),
                  decoration: BoxDecoration(
                    color: Color(0xFF21BFBD),
                    borderRadius: BorderRadius.circular(13.0),
                  ),
                  child: Padding(
                    child: Center(
                        child: Text(
                      course,
                      style: TextStyle(
                          fontWeight: FontWeight.w500, color: Colors.white),
                    )),
                    padding: EdgeInsets.all(20),
                  )),
            );
          }),
    );

    var modalitiesSection = Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 10.0),
            child: Text(
              'Modalities',
              style: TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          modalityItems,
        ],
      ),
    );
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            title,
            SizedBox(
              height: 60.0,
            ),
            modalitiesSection,
            SizedBox(
              height: 60.0,
            ),
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Text(
                      'Courses',
                      style: TextStyle(
                        fontSize: 18.0,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
                  courseItems,
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}