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!!!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.