[Flutter] SliverAppBar

2020. 12. 26. 20:09Flutter Mobile App

반응형

SliverAppBar : 스크롤이 될 때마다 형태를 바꾸거나 하단으로 스크롤 시 숨겨지는 맞춤형 앱 바 스크롤 효과를 제공



main.dart

더보기
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  static const String _title = '플러더 코드 샘플';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      // theme: ThemeData(
      //   primarySwatch: Colors.blue,
      //   visualDensity: VisualDensity.adaptivePlatformDensity,
      // ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 150.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('M I N O K U M A'),
            ),
            actions: [
              IconButton(
                icon: const Icon(Icons.add_circle),
                tooltip: '새 엔트리 추가',
                onPressed: () {
                  print('새 엔트리 추가()');
                },
              )
            ],
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('아이템 $index'),
                );
              },
              childCount: 20,
            ),
          )
        ],
      ),
    );
  }
}

 

반응형