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

  @override
  State<GG> createState() => _GGState();
}

class _GGState extends State<GG> {
  String img = 'https://images.unsplash.com/photo-1649859398731-d3c4ebca53fc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170';
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.black26,
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(),
        slivers: [
           SliverAppBar(
            backgroundColor: Colors.deepOrangeAccent,
            // Height of appbar.
            expandedHeight: 300,
            // turn on zoom.
            stretch: true,
            flexibleSpace:  FlexibleSpaceBar(
              title: const Text('GeeCoders',style: TextStyle(fontWeight: FontWeight.w600),),
              centerTitle: true,
              stretchModes: const[
                // zoom .
                StretchMode.zoomBackground,
                // hide title after zoom
                StretchMode.fadeTitle,
                // blur after zoom
                StretchMode.blurBackground,
              ],
              background: Stack(
                // image.
                fit: StackFit.expand,
                children: [
                  Image.network(img,fit: BoxFit.cover,),
                ],
              ),
            ),
          ),
          // design .
          SliverList(delegate: SliverChildListDelegate([
            buildDesign(),
          ]),
          )
        ],
      )
    );
  }

Widget buildDesign() {
  return Column(
    children: const <Widget>[
       Padding(
        padding: EdgeInsets.symmetric(
          vertical: 16.0,
          horizontal: 16.0,
        ),
        child: Text(
          'help code',
          style: TextStyle(
            fontSize: 26,
            color: Colors.white,
          ),
        ),
      ),
      DecoratedBox(
        decoration: BoxDecoration(
          gradient: RadialGradient(
            radius: 5,
            colors: [Colors.black, Colors.orange, Colors.deepOrangeAccent],
            stops: [0, 0.4, 1.0],
          ),
        ),
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Center(
            child: Text(
              'Powers and Abilities',
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
      Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(
          'gee coders',
          style: TextStyle(
            fontSize: 26.0,
            color: Colors.white,
          ),
        ),
      )
    ],
  );
}
}