// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. // Flutter code sample for NavigationRail.extendedAnimation import 'dart:ui'; import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: MyNavigationRail(), ), ); } } class MyNavigationRail extends StatefulWidget { const MyNavigationRail({super.key}); @override State<MyNavigationRail> createState() => _MyNavigationRailState(); } class _MyNavigationRailState extends State<MyNavigationRail> { int _selectedIndex = 0; bool _extended = false; @override Widget build(BuildContext context) { return Row( children: <Widget>[ NavigationRail( selectedIndex: _selectedIndex, extended: _extended, leading: MyNavigationRailFab(onPressed: () { setState(() { _extended = !_extended; }); }), onDestinationSelected: (int index) { setState(() { _selectedIndex = index; }); }, labelType: NavigationRailLabelType.none, destinations: const <NavigationRailDestination>[ NavigationRailDestination( icon: Icon(Icons.favorite_border), selectedIcon: Icon(Icons.favorite), label: Text('First'), ), NavigationRailDestination( icon: Icon(Icons.bookmark_border), selectedIcon: Icon(Icons.book), label: Text('Second'), ), NavigationRailDestination( icon: Icon(Icons.star_border), selectedIcon: Icon(Icons.star), label: Text('Third'), ), ], ), const VerticalDivider(thickness: 1, width: 1), // This is the main content. Expanded( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text('Tap on FloatingActionButton to expand'), const SizedBox(height: 20), Text('selectedIndex: $_selectedIndex'), ], ), ), ), ], ); } } class MyNavigationRailFab extends StatelessWidget { const MyNavigationRailFab({super.key, this.onPressed}); final VoidCallback? onPressed; @override Widget build(BuildContext context) { final Animation<double> animation = NavigationRail.extendedAnimation(context); return AnimatedBuilder( animation: animation, builder: (BuildContext context, Widget? child) { // The extended fab has a shorter height than the regular fab. return Container( height: 56, padding: EdgeInsets.symmetric( vertical: lerpDouble(0, 6, animation.value)!, ), child: animation.value == 0 ? FloatingActionButton( onPressed: onPressed, child: const Icon(Icons.add), ) : Align( alignment: AlignmentDirectional.centerStart, widthFactor: animation.value, child: Padding( padding: const EdgeInsetsDirectional.only(start: 8), child: FloatingActionButton.extended( icon: const Icon(Icons.add), label: const Text('CREATE'), onPressed: onPressed, ), ), ), ); }, ); } }