Search code examples
fluttergestureappbar

Flutter - Change appbar on longpress with Material


I am trying to do this kind of thing with Flutter : https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B3T7oTWa3HiFcHBDaTlreHdVZGc%2Fitem-selection-selecting-items.mp4

var gestureTemp = GestureDetector(
    onLongPress: (){
      print('LONG PRESSED');
      //CHANGE APPBAR
    },
    child: Padding(
        padding: EdgeInsets.only(right:8),
        child: Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: icon
            ),
            label: Text(space.label, style: TextStyle(fontSize: 12, color:Colors.grey.shade800))
    ),
  ));

It detects the long press, but I don't know how to change my appbar...

Any ideas ?

EDIT: Here is what I do

var appBar1 = AppBar(...);
var appBar2 = AppBar(...);
var appBar = appBar1;

My appBar is displayed in my Scaffold.

On my GestureDetector :

onLongPress: (){
  print('LONG PRESSED');
  setState(() {
    appBar = appBar2;
  });
},

Solution

  • Welcome to StackOverflow!

    The approach you described sounds quite right. Here is a standalone example so you can double check your code:

    AppBar Switch Demo

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: MyPage());
      }
    }
    
    class MyPage extends StatefulWidget {
      @override
      _MyPageState createState() => _MyPageState();
    }
    
    class _MyPageState extends State<MyPage> {
      static final AppBar _defaultBar = AppBar(
        title: Text('Inbox'),
        leading: Icon(Icons.menu),
        actions: <Widget>[Icon(Icons.search), Icon(Icons.more_vert)],
        backgroundColor: Colors.black,
      );
    
      static final AppBar _selectBar = AppBar(
        title: Text('1'),
        leading: Icon(Icons.close),
        actions: <Widget>[
          Icon(Icons.flag),
          Icon(Icons.delete),
          Icon(Icons.more_vert)
        ],
        backgroundColor: Colors.deepPurple,
      );
    
      AppBar _appBar = _defaultBar;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: _appBar,
          body: Center(
            child: RaisedButton(
              child: Text('Switch!'),
              onPressed: () {
                setState(() {
                  _appBar = _appBar == _defaultBar
                      ? _selectBar
                      : _defaultBar;
                });
              },
            ),
          ),
        );
      }
    }