Using a Row in FlexibleSpaceBar inside a SliverAppBar #11954

Activity

1. Hixie

   added

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   on May 18, 2018
2. Hixie

   added this to the Stretch GoalsThis milestone has been deleted milestone on May 18, 2018
3. Hixie commented on May 18, 2018

   

   Hixie

   on May 18, 2018

   Contributor

   More actions

   Do you have a sample main.dart showing what you mean so we can play with it?
4. Hixie commented on May 18, 2018

   

   Hixie

   on May 18, 2018

   Contributor

   More actions

   cc @HansMuller
5. Hixie

   modified the milestones: Stretch GoalsThis milestone has been deleted, New Stretch GoalsThis milestone has been deleted on Jan 7, 2020
6. TahaTesser commented on Mar 24, 2020

   

   TahaTesser

   on Mar 24, 2020

   Contributor

   More actions

   Hi @balazsgerlei

   Please checkout this sample

   Code Sample

   // Flutter code sample for FlexibleSpaceBar
   
   // This sample application demonstrates the different features of the
   // [FlexibleSpaceBar] when used in a [SliverAppBar]. This app bar is configured
   // to stretch into the overscroll space, and uses the
   // [FlexibleSpaceBar.stretchModes] to apply `fadeTitle`, `blurBackground` and
   // `zoomBackground`. The app bar also makes use of [CollapseMode.parallax] by
   // default.
   
   import 'package:flutter/material.dart';
   
   void main() => runApp(MaterialApp(home: MyApp()));
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: CustomScrollView(
           physics: const BouncingScrollPhysics(),
           slivers: <Widget>[
             SliverAppBar(
               stretch: true,
               onStretchTrigger: () {
                 // Function callback for stretch
                 return;
               },
               expandedHeight: 300.0,
               flexibleSpace: FlexibleSpaceBar(
                 stretchModes: <StretchMode>[
                   StretchMode.zoomBackground,
                   StretchMode.blurBackground,
                   StretchMode.fadeTitle,
                 ],
                 centerTitle: true,
                 title: Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[
                     Text('Flight Report'),
                     Image.network(
                         'https://www.freeiconspng.com/uploads/camera-icon-png--clipart-best-23.png',
                         height: 50,
                         width: 50)
                   ],
                 ),
                 background: Stack(
                   fit: StackFit.expand,
                   children: [
                     Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                       fit: BoxFit.cover,
                     ),
                     const DecoratedBox(
                       decoration: BoxDecoration(
                         gradient: LinearGradient(
                           begin: Alignment(0.0, 0.5),
                           end: Alignment(0.0, 0.0),
                           colors: <Color>[
                             Color(0x60000000),
                             Color(0x00000000),
                           ],
                         ),
                       ),
                     ),
                   ],
                 ),
               ),
             ),
             SliverList(
               delegate: SliverChildListDelegate([
                 ListTile(
                   leading: Icon(Icons.wb_sunny),
                   title: Text('Sunday'),
                   subtitle: Text('sunny, h: 80, l: 65'),
                 ),
                 ListTile(
                   leading: Icon(Icons.wb_sunny),
                   title: Text('Monday'),
                   subtitle: Text('sunny, h: 80, l: 65'),
                 ),
                 // ListTiles++
               ]),
             ),
           ],
         ),
       );
     }
   }
   

   We can use row in title
   if you disagree please write in the comments and I will reopen it
   Thank you
7. TahaTesser

   closed this as completedon Mar 24, 2020
8. yassine12you commented on Apr 23, 2020

   

   yassine12you

   on Apr 23, 2020

   Last edited by yassine12you

   More actions

   you must center your row
   child: Row(
   mainAxisAlignment: MainAxisAlignment.center,

   Best regards
9. github-actions commented on Aug 17, 2021

   

   github-actionsbot

   on Aug 17, 2021

   More actions

   This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
10. github-actions

    locked as resolved and limited conversation to collaborators on Aug 17, 2021