flutter - Anyone know how to create photo with sta

2019-08-25 23:53发布

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

0条回答
登录 后发表回答