test2.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lottie/lottie.dart';
import 'package:pokemania_io/data/data.dart';
import 'package:pokemania_io/widgets/previews.dart';
import 'package:firebase_core/firebase_core.dart';
import 'Screens/Detail.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.black38,
    statusBarIconBrightness: Brightness.light,
  ));
  runApp(MyApp());
}

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'PokéMania',
      theme: ThemeData.dark(),
      home: Homepage(),
    );
  }
}



class CustomAppBar extends StatelessWidget {
  final double scrollOffset;

  const CustomAppBar({
    Key key,
    this.scrollOffset = 0.0,
  }) : super(key: key);



  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 10.0,
        ),
        color: Colors.black
            .withOpacity((scrollOffset / 350).clamp(0, 1).toDouble()),
        child: SafeArea(
            child: Row(
          children: [
            Image.asset(
              'icons/logo.png',
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: Text('',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'font',
                    fontSize: 18.0,
                  )),
            )
          ],
        )));
  }
}

class _HomepageState extends State<Homepage> {
  ScrollController _scrollController;
  double _scrollOffset = 0.0;


  @override
  void initState() {
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          _scrollOffset = _scrollController.offset;
        });
      });
    super.initState();
  }

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





  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    routeToDetail(DocumentSnapshot infoDocumentSnapshot) {
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => Detail(info: infoDocumentSnapshot)));
    }

    return Scaffold(
      backgroundColor: Colors.black,
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: Size(screenSize.width, 40.0),
        child: CustomAppBar(
          scrollOffset: _scrollOffset,
        ),
      ),
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverToBoxAdapter(
              child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                height: 500.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('images/bgwall.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Container(
                  height: 500.0,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.black, Colors.transparent],
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                    ),
                  )),
              Positioned(
                bottom: 20.0,
                child: SizedBox(
                    width: 250.0, child: Image.asset('images/pokelogo.png')),
              )
            ],
          )),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  MaterialButton(
                    onPressed: null,
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Image.asset('images/add.png',
                              scale: 22.0, color: Colors.white),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Text(
                            'My List',
                            style:
                                TextStyle(color: Colors.white, fontSize: 18.0),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5)),
                    child: FlatButton.icon(
                        onPressed: () {
                        },
                        icon: Padding(
                          padding: const EdgeInsets.only(left: 15.0),
                          child: Image.asset(
                            'images/play.png',
                            scale: 22.0,
                            color: Colors.black,
                          ),
                        ),
                        label: Text(
                          '',
                          style: TextStyle(color: Colors.black, fontSize: 18.0),
                        )),
                  ),
                  MaterialButton(
                    onPressed: null,
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Image.asset('images/inf.png',
                              scale: 22.0, color: Colors.white),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Text(
                            'Info',
                            style:
                                TextStyle(color: Colors.white, fontSize: 18.0),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.only(top: 20.0),
            sliver: SliverToBoxAdapter(
              child: Previews(
                title: 'Available Seasons',
                contentList: previews,
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(top: 10.0),
              child: SizedBox(
                height: 200,
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(right: 0.0),
                      child: Text(
                        'Season 1: Indigo League',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold),
                        textAlign: TextAlign.start,
                      ),
                    ),
                    SizedBox(
                      height: 170.0,
                      child: StreamBuilder<QuerySnapshot>(
                        stream: FirebaseFirestore.instance
                            .collection('Season 1: Indigo League')
                            .orderBy('name')
                            .snapshots(),
                        builder: (context, snapshot) {
                          if (snapshot.connectionState ==
                              ConnectionState.waiting) {
                            return Center(
                                child: Lottie.asset('animation/loading.json'));
                          } else {
                            final infoDocumentSnapshot = snapshot.data;

                            return new ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: snapshot.data.docs.length,
                                itemBuilder: (_, index) {
                                  return GestureDetector(
                                    key: ValueKey("mylist_$index"),
                                    onTap: () => routeToDetail(
                                        infoDocumentSnapshot.docs[index]),
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: SizedBox(
                                        height: 150.0,
                                        width: 150.0,
                                        child: Image.network(
                                          snapshot.data.docs[index]
                                              .data()['image'],
                                          fit: BoxFit.cover,
                                        ),
                                      ),
                                    ),
                                  );
                                });
                          }
                        },
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),