flutter - Anyone know how to create photo with stack silverlist?

0

I want to create a profile photo with a stack, below it is a silver list (for animation purposes when scroll)

How do I add the stack photo next to the silverlist, then when the discroll down the photo shrinks, if scroll back to the top, the photo enlarges as before.

see the comparison of the image below:

this is what i want currently

Widget _buildDetailFood(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          floating: false,
          expandedHeight: 256,
          flexibleSpace: FlexibleSpaceBar(
            background: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Image.asset(
                  'images/dish.jpg',
                  fit: BoxFit.cover,
                ),
                // This gradient ensures that the toolbar icons are distinct
                // against the background image.
                const DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment(0.0, -1.0),
                      end: Alignment(0.0, -0.4),
                      colors: <Color>[Color(0x60000000), Color(0x00000000)],
                    ),
                  ),
                ),

              ],
            ),
          ),
        ),
    SliverList(
        delegate: SliverChildListDelegate([
      Container(
        color: Colors.white,
        padding: const EdgeInsets.all(16),
        // margin: const EdgeInsets.only(bottom: 4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 70,
              height: 70,
              child: CircleAvatar(
                backgroundColor: Colors.blueAccent,
                child: Text('T'),
              ),
            ),
            SizedBox(height: 10),
            Text(
              "Lomo Saltado",
              style: Theme.of(context)
                  .textTheme
                  .title
                  .copyWith(fontSize: 18.0),
            ),
            Text(
              "Papachos",
              style: Theme.of(context)
                  .textTheme
                  .caption
                  .copyWith(fontSize: 16.0),
            ),


            SizedBox(height: 12),

            Row(
              children: <Widget>[
            Icon(FontAwesomeIcons.locationArrow, size: 12, color: Colors.grey[700]),
            SizedBox(width: 10),
            Text("Av. Cuba 1612, Jesus Maria", style: TextStyle(color: Colors.grey[700])),

              ],
            ),

            SizedBox(height: 5),
            Row(
              children: <Widget>[
            Icon(FontAwesomeIcons.clock, size: 12, color: Colors.grey[700]),
            SizedBox(width: 10),
            Text("6:00 AM - 9:00 PM", style: TextStyle(color: Colors.grey[700], fontWeight: FontWeight.w400)),

              ],
            ),
            SizedBox(height: 12),

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[

            RaisedButton(color: Colors.orange[900],
            child: Text('AGREGAR FOTOS', style: TextStyle(color: Colors.white),),
            onPressed: (){}),

            RaisedButton.icon(
              icon: Icon(FontAwesomeIcons.solidStar, color: Colors.white, size: 14), 
            color: Colors.orange[600],
            label: Text(' VOTAR', style: TextStyle(color: Colors.white),),
            // child: ,
            onPressed: (){}),

              ],
            )
          ],
        ),
      ),
      Container(
        color: Colors.white,
        margin: const EdgeInsets.symmetric(vertical: 4.0),
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Summary",
              style:
                  Theme.of(context).textTheme.title.copyWith(fontSize: 20),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: Text("Bedroom"),
            ),
            Padding( // Wrap(
            //   runSpacing: 8,
            //   spacing: 8,
            //   children: property.keyWordList
            //       .map((kl) => Chip(
            //             label: Text(kl),
            //             labelStyle: TextStyle(color: Colors.white),
            //             backgroundColor: Theme.of(context).accentColor,
            //           ))
            //       .toList(),
            // ),
              padding: const EdgeInsets.only(bottom: 4.0),
              child: Text(
                "Tags",
                style: Theme.of(context).textTheme.subtitle,
              ),
            ),

          ],
        ),
      ),
      Container(
        color: Colors.white,
        margin: const EdgeInsets.symmetric(vertical: 4.0),
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: Text(
                "Lister",
                style: Theme.of(context)
                    .textTheme
                    .title
                    .copyWith(fontSize: 20.0),
              ),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text("unavailable"),
              subtitle: Text("Unavailable"),
            ),
          ],
        ),
      ),
    ]))
  ],
);
  }

any answer is certainly very helpful, thanks

dart
flutter
stack

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0