1

I'm trying to create a clone project with this design: original design

But the result is not that good, IconButton is not at the right position, and a lot of animtation is not implemented yet:

  • The search bar
  • Icon Button Color changes
  • Icon Button alignment my code

Here is my code:

import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:momo/configs/themes/constants.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            snap: false,
            floating: false,
            expandedHeight: 145.0,
            backgroundColor: Color(0xff008577),
            leading: IconButton(
              onPressed: () {},
              icon: Icon(Icons.search_rounded),
            ),
            actions: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Badge(
                  padding: const EdgeInsets.all(3.5),
                  position: BadgePosition.topEnd(top: 5, end: 5),
                  animationType: BadgeAnimationType.scale,
                  animationDuration: Duration(milliseconds: 200),
                  badgeContent: Text(
                    '89',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 7.0,
                        fontWeight: FontWeight.bold),
                  ),
                  child: IconButton(
                    onPressed: () {},
                    splashRadius: 18.0,
                    icon: Icon(
                      Icons.notifications_none,
                      size: 26,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: IconButton(
                  onPressed: () {},
                  splashRadius: 18.0,
                  icon: CircleAvatar(
                    backgroundColor: Colors.white,
                    radius: 13,
                    child: CircleAvatar(
                      radius: 11.0,
                      backgroundImage:
                          AssetImage('assets/images/src_appscreens_appmain_contacts_img_ic_avatar_default.png'),
                    ),
                  ),
                ),
              )
            ],
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              // expandedTitleScale: 3,
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(onPressed: () {}, icon: Icon(Icons.ac_unit, color: Colors.white,)),
                  IconButton(onPressed: () {}, icon: Icon(Icons.access_alarm, color: Colors.white,)),
                  IconButton(onPressed: () {}, icon: Icon(Icons.accessibility_rounded, color: Colors.white,)),
                  IconButton(onPressed: () {}, icon: Icon(Icons.account_balance_wallet_outlined, color: Colors.white,)),
                ],
              ),
              background: Image.asset(
                'assets/images/src_appcore_utils_imageutil_img_im_background.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  color: index.isOdd ? Colors.grey : Colors.white,
                  height: 100,
                  child: Center(
                    child: Text(
                      '$index',
                      textScaleFactor: 5,
                    ),
                  ),
                );
              },
              childCount: 20,
            ),
          )
        ],
      ),
    );
  }
}

Please help if you have any idea. Thanks alot!!!

Son Hoang
  • 36
  • 2

0 Answers0