Flutter Practice UI

import 'package:flutter/material.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  List<UserModel> userList = [
    UserModel(id: 101, firstName: 'Ram 101', lastName: 'Pukar'),
    UserModel(id: 102, firstName: 'Ram 102', lastName: 'Pukar'),
    UserModel(id: 103, firstName: 'Ram 103', lastName: 'Pukar'),
    UserModel(id: 104, firstName: 'Ram 104', lastName: 'Pukar'),
    UserModel(id: 105, firstName: 'Ram 105', lastName: 'Pukar'),
    UserModel(id: 106, firstName: 'Ram 106', lastName: 'Pukar'),
    UserModel(id: 107, firstName: 'Ram 107', lastName: 'Pukar'),
    UserModel(id: 108, firstName: 'Ram 108', lastName: 'Pukar'),
    UserModel(id: 109, firstName: 'Ram 109', lastName: 'Pukar'),
    UserModel(id: 110, firstName: 'Ram 110', lastName: 'Pukar')
  ];

  int selectedIndex = 0;

  // List userList = ['Ram', 'Pukar', 'Chaudhary'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),
        title: Text("Title Bar"),
        centerTitle: true,
        actions: [
          IconButton(
            icon: Icon(
              (Icons.notifications),
            ),
            onPressed: null,
          ),
          IconButton(
            icon: Icon(
              (Icons.more_vert),
            ),
            onPressed: null,
          ),
        ],
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                margin: EdgeInsets.all(8.0),
                padding: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Color(
                    0xFF1D1E33,
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
                child: Text(
                  "Left Side",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(8.0),
                padding: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: Color(
                    0xFF1D1EAA,
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
                child: Text(
                  "Right Side",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
          Container(
            height: 1.0,
            width: double.infinity,
            color: Colors.black,
            margin: EdgeInsets.symmetric(
              horizontal: 5.0,
              vertical: 5.0,
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.orange,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10.0),
                topRight: Radius.circular(10.0),
                bottomLeft: Radius.circular(10.0),
                bottomRight: Radius.circular(10.0),
              ),
            ),
            height: 80.0,
            // color: Colors.pink,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: userList.length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedIndex = index;
                    });
                  },
                  child: Padding(
                    padding: const EdgeInsets.only(
                      top: 2.0,
                      left: 6.0,
                      right: 6.0,
                    ),
                    child: Column(
                      children: [
                        CircleAvatar(
                          radius: 30.0,
                          backgroundColor: Color(0xffFDCF09),
                          child: CircleAvatar(
                            radius: 29.0,
                            backgroundImage: AssetImage('assets/bike.jpg'),
                          ),
                        ),
                        Text(
                          userList[index].firstName,
                          style: index == selectedIndex
                              ? TextStyle(
                                  fontWeight: FontWeight.bold,
                                )
                              : null,
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          Container(
            child: Text('Welcome...'),
          )
        ],
      ),
    );
  }
}

class UserModel {
  final int id;
  final String firstName;
  final String lastName;
  UserModel({this.id, this.firstName, this.lastName});
}

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.