android_scoll_anim_sliver.dart

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ProfileScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen>
    with SingleTickerProviderStateMixin {
  double topPadding = 0;
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    )..repeat(reverse: false);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.linear);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double expandedHeight = 300;
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              backgroundColor: Colors.purple,
              expandedHeight: expandedHeight,
              pinned: true,
              flexibleSpace: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  topPadding = constraints.biggest.height;

                  double t =
                      (topPadding - kToolbarHeight) /
                      (expandedHeight - kToolbarHeight);
                  t = t.clamp(0.0, 1.0);

                  return FlexibleSpaceBar(
                    titlePadding: EdgeInsets.only(left: 16, bottom: 16),
                    title: Opacity(
                      opacity: 1 - t,
                      child: Text("Ronald Copper"),
                    ),
                    background: Stack(
                      fit: StackFit.expand,
                      children: [
                        Container(color: Colors.purple),
                        Center(
                          child: Stack(
                            alignment: Alignment.center,
                            children: [
                              AnimatedBuilder(
                                animation: _animation,
                                builder: (context, child) {
                                  return Stack(
                                    children: [
                                      for (int i = 0; i < 5; i++)
                                        Positioned(
                                          left: MediaQuery.sizeOf(context).width / 2 + 100 * sin(_controller.value * 2 * pi + i),
                                          top: 100 + 30 * cos(_controller.value * 2 * pi + i),
                                          child: Opacity(
                                            opacity:
                                                1 -
                                                (_controller.value + i * 0.1) %
                                                    1.0,
                                            child: Image.network(
                                              'https://cdn-icons-png.flaticon.com/512/616/616408.png',
                                              width: 32,
                                              height: 32,
                                            ),
                                          ),
                                        ),
                                    ],
                                  );
                                },
                              ),
                              Transform.scale(
                                scale: 0.5 + t * 0.5,
                                child: CircleAvatar(
                                  radius: 50,
                                  backgroundImage: NetworkImage(
                                    'https://picsum.photos/200/200?random=3',
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Positioned(
                          bottom: 20,
                          left: 0,
                          right: 0,
                          child: Opacity(
                            opacity: t,
                            child: Column(
                              children: [
                                Text(
                                  "Ronald Copper",
                                  style: TextStyle(
                                    fontSize: 22,
                                    color: Colors.white,
                                  ),
                                ),
                                Text(
                                  "online",
                                  style: TextStyle(color: Colors.white70),
                                ),
                                SizedBox(height: 16),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    _buildAction(Icons.message, 'Message'),
                                    _buildAction(Icons.mic_off, 'Unmute'),
                                    _buildAction(Icons.call, 'Call'),
                                    _buildAction(Icons.videocam, 'Video'),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ];
        },
        body: _buildBody(),
      ),
    );
  }

  Widget _buildAction(IconData icon, String label) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Column(
        children: [
          CircleAvatar(
            radius: 24,
            backgroundColor: Colors.white24,
            child: Icon(icon, color: Colors.white),
          ),
          SizedBox(height: 4),
          Text(label, style: TextStyle(color: Colors.white, fontSize: 12)),
        ],
      ),
    );
  }

  Widget _buildBody() {
    return ListView(
      padding: EdgeInsets.all(16),
      children: [
        Text(
          "25 y.o, CS streamer, San Francisco",
          style: TextStyle(fontSize: 16),
        ),
        SizedBox(height: 8),
        Text("@ronald_copper", style: TextStyle(color: Colors.grey)),
        SizedBox(height: 16),
        ElevatedButton.icon(
          onPressed: () {},
          icon: Icon(Icons.person_add),
          label: Text("Add to Contacts"),
        ),
        SizedBox(height: 16),
        DefaultTabController(
          length: 5,
          child: Column(
            children: [
              TabBar(
                tabs: [
                  Tab(text: "Posts"),
                  Tab(text: "Gifts"),
                  Tab(text: "Media"),
                  Tab(text: "Files"),
                  Tab(text: "Links"),
                ],
                labelColor: Colors.black,
                unselectedLabelColor: Colors.grey,
              ),
              Container(
                height: 400,
                child: GridView.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 4,
                  mainAxisSpacing: 4,
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  children: List.generate(
                    9,
                    (index) => Image.network(
                      "https://picsum.photos/seed/$index/200/200",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}