Flutter Remote Healthcare App Design

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final nameList = [
    'Ram',
    'Pukar',
    'Hari',
    'Rajesh',
    'Kishna',
    'Anil',
    'Suresh',
    'Ritesh',
    'Laxmi',
    'Smith',
    'Nilam',
    'Umesh',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: AppBar(
        leading: Icon(Icons.arrow_back),
        title: Text(
          'Gastroenterologist',
          style: TextStyle(
            color: Color(0xFFFFFFFF),
            fontWeight: FontWeight.bold,
            fontSize: 23.0,
          ),
        ),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Container(
        margin: EdgeInsets.only(top: 40.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(40.0),
            topRight: Radius.circular(40.0),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              margin: EdgeInsets.only(
                top: 10.0,
              ),
              alignment: Alignment.center,
              child: Text(
                '5 patients in this queue',
                style: TextStyle(
                  color: Color(0xFF59BAAE),
                  fontWeight: FontWeight.bold,
                  fontSize: 16.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(
                top: 3.0,
              ),
              alignment: Alignment.center,
              child: Text(
                'Estimated wait time is 4 minutes',
                style: TextStyle(
                  color: Color(0xFF59BAAE),
                  fontWeight: FontWeight.bold,
                  fontSize: 16.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(
                top: 3.0,
                bottom: 5.0,
              ),
              child: Row(
                children: [
                  Icon(
                    Icons.add_circle,
                    color: Color(0xFF59BAAE),
                    size: 50.0,
                  ),
                  SizedBox(
                    width: 20.0,
                  ),
                  Text(
                    'First available',
                    style: TextStyle(
                      color: Color(0xFF59BAAE),
                      fontSize: 23.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Container(
                child: ListView.builder(
                  itemCount: nameList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      leading: CircleAvatar(
                        backgroundImage: AssetImage("assets/bike.jpg"),
                      ),
                      title: Text(nameList[index]),
                      subtitle: Text('Pukar Chaudhary'),
                    );
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Source: https://dribbble.com/shots/13076151/attachments/4677641?mode=media

Output:

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.