カスタムシルバー

通常のケースでは、我々はツールバーを作成するAppBarウィジェットを使用し、WhatsAppアプリバーのようなアプリケーションバーの特別な種類が必要な場合は、SliverAppBarと呼ばれる別のウィジェットが必要です.
これらは理解するのが簡単です、しかし、我々が練習して、より多くのパラメタを調査するならば、それはとても単純でありません、そして、単純です.
私はどのように我々はアプリケーションバーのようなWhatsAppを構築することができますStackOverflowとGithub reposで多くの質問を見てきた?

観察

まずWhatsAppのappbarと通常のappbar

我々はAppbar上でスライドの動作を見ることができるWhatsAppから観察することができます.

私たちは通常のappbarウィジェットを使ってビルドできません.

Weは、その種のデザインを成し遂げるもう一つの装置の助けを必要とします.

を作りましょう.

import 'package:flutter/material.dart';
import 'package:whatsapp/constants/app_colors.dart';
import 'package:whatsapp/views/screens/home_screen/widgets/custom_tab.dart';

class CustomAppBar extends StatelessWidget {
  const CustomAppBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      toolbarHeight: 49,
      pinned: true,
      expandedHeight: 110,
      backgroundColor: AppColors.primarySwatch,
      title: const Text(
        'WhatsApp',
        style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 23,
        ),
      ),
      centerTitle: false,
      actions: [
        IconButton(
          splashRadius: 20,
          onPressed: () {},
          icon: const Icon(Icons.search),
        ),
        IconButton(
          splashRadius: 20,
          onPressed: () {},
          icon: const Icon(Icons.more_vert),
        ),
      ],
      bottom: const PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: TabBar(
          indicatorWeight: 3,
          indicatorColor: Colors.white,
          tabs: [
            Tab(
              icon: Icon(Icons.photo_camera),
            ),
            CustomTab(name: 'chats'),
            CustomTab(name: 'status'),
            CustomTab(name: 'calls'),
          ],
        ),
      ),
    );
  }
}

ここでは、sliver appbarを使用しています.
フルコードはgitHub
WhatsAppクローンフルビデオシリーズ