it-swarm.dev

Flutter Sliver AppBar가 확장 또는 축소되었는지 확인하는 방법은 무엇입니까?

Flutter에서 배경 위젯과 함께 SliverAppBar 을 사용하고 있습니다.

문제는 확장 일 때 제목과 아이콘 (리딩 및 동작)이 올바르게 표시 되려면 white이어야하고 collapsed =, black으로 변경해야합니다.

bool 을 얻는 방법에 대한 아이디어가 있습니까? 또는이 문제를 해결하는 다른 방법.

감사합니다.

class SliverExample extends StatefulWidget {
  final Widget backgroundWidget;
  final Widget bodyWidgets;

  SliverExample({
    this.backgroundWidget,
    this.body,
  });
  @override
  _SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

  // I need something like this
  // To determine if SliverAppBar is expanded or not.
  bool isAppBarExpanded = false;

  @override
  Widget build(BuildContext context) {

    // To change the item's color accordingly
    // To be used in multiple places in code
    Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

    // In my case PrimaryColor is white,
    // and the background widget is dark

    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            leading: BackButton(
              color: itemColor, // Here
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: itemColor, // Here
                ),
                onPressed: () {},
              ),
            ],
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'title',
                style: TextStyle(
                  fontSize: 18.0,
                  color: itemColor, // Here
                ),
              ),
              // Not affecting the question.              
              background: widget.backgroundWidget,
            ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.body),
        ],
      ),
    );
  }
}
7
Sina Seirafi

LayoutBuilder를 사용하여 더 얇은 AppBar의 가장 큰 높이를 얻을 수 있습니다. biggest.height = 80.0이면 실제로 은색 앱 바가 축소되었음을 의미합니다.

전체 예는 다음과 같습니다.

import 'package:flutter/material.Dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var top = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                // print('constraints=' + constraints.toString());
                top = constraints.biggest.height;
                return FlexibleSpaceBar(
                    centerTitle: true,
                    title: AnimatedOpacity(
                        duration: Duration(milliseconds: 300),
                        //opacity: top == 80.0 ? 1.0 : 0.0,
                        opacity: 1.0,
                        child: Text(
                          top.toString(),
                          style: TextStyle(fontSize: 12.0),
                        )),
                    background: Image.network(
                      "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
                      fit: BoxFit.cover,
                    ));
              })),
        ];
      },body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context,index){
          return Text("List Item: " + index.toString());
        },
      ),
    ));
  }
}

최종 결과:

enter image description here

13
Jack Sun

원하는 효과를 얻으려면 ScrollController를 사용해야합니다

이 코드를 사용해보십시오

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SliverExample(
        bodyWidgets: Text(
            'Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
        backgroundWidget: Text('Hello Background'),
      ),
    );
  }
}

class SliverExample extends StatefulWidget {
  final Widget backgroundWidget;
  final Widget bodyWidgets;

  SliverExample({
    this.backgroundWidget,
    this.bodyWidgets,
  });

  @override
  _SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

  ScrollController _scrollController;
  Color _theme ;

  @override
  void initState() {
    super.initState();
    _theme = Colors.black;

    _scrollController = ScrollController()
      ..addListener(
        () => _isAppBarExpanded ?
            _theme != Colors.white ?
        setState(
          () {
            _theme = Colors.white;
            print(
                'setState is called');
          },
        ):{}
            : _theme != Colors.black ?
        setState((){
          print(
              'setState is called');
          _theme = Colors.black;
        }):{},

      );
  }

  bool get _isAppBarExpanded {
    return _scrollController.hasClients &&
        _scrollController.offset > (200 - kToolbarHeight);
  }

  @override
  Widget build(BuildContext context) {
    // To change the item's color accordingly
    // To be used in multiple places in code
    //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

    // In my case PrimaryColor is white,
    // and the background widget is dark

    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            leading: BackButton(
              color: _theme, // Here
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: _theme, // Here
                ),
                onPressed: () {},
              ),
            ],
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'title',
                style: TextStyle(
                  fontSize: 18.0,
                  color: _theme, // Here
                ),
              ),
              // Not affecting the question.
              background: widget.backgroundWidget,
            ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.bodyWidgets),
        ],
      ),
    );
  }
}

익숙하지 않다면? : 표기법 다음을 사용할 수 있습니다

_scrollController = ScrollController()
      ..addListener(
          (){
            if(_isAppBarExpanded){
              if(_theme != Colors.white){
                setState(() {
                  _theme = Colors.white;
                  print('setState is called with white');
                });
              }
            }else{
              if(_theme != Colors.black){
                setState(() {
                  _theme = Colors.black;
                  print('setState is called with black');
                });
              }
            }
          }
6
Saed Nabil