Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.6k views
in Technique[技术] by (71.8m points)

flutter - change appBar size smoothly when scrolling the same like SliverAppBar

I can't use SliverAppBar(any sliver widget). I want to change my appBar size smoothly when scrolling the same like SliverAppBar

I tried this way, but this logic is wrong.

  void scrollListener() {
    double appBarSize = 54;
    double pixel = scrollController.position.pixels;

    int _size = min(max(pixel.toInt(), appBarSize.toInt()), 500);

    appSize = _size.toDouble();

    setState(() {});
  }

Full Code

import 'package:flutter/material.dart';
import 'dart:math' show min, max;

void main() {
  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  ScrollController scrollController;

  double appSize = 500;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(scrollListener);
  }

  void scrollListener() {
    double appBarSize = 54;
    double pixel = scrollController?.position?.pixels ?? appBarSize;
    int scrollY = min(max(pixel.toInt(), appBarSize.toInt()), 500);

    appSize = scrollY.toDouble();

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(appSize), child: AppBar()),
        body: MyWidget(scrollController: scrollController),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final ScrollController scrollController;

  const MyWidget({Key key, this.scrollController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 5000,
        controller: scrollController,
        itemBuilder: (_, int index) {
          return Container(
            width: 150,
            height: 150,
            child: Text('item $index'),
          );
        });
  }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...