Search bar animata in Flutter
Per ottenere una search bar animata in Flutter abbiamo diversi plugin.
Io ho usato searchbar_animation e mi ci sono trovato bene.
In questo articolo vediamo un esempio su come usarla.
Cominciamo con l'installazione:
flutter pub add searchbar_animation
Qui sotto un esempio di codice:
import 'package:flutter/material.dart';
import 'package:searchbar_animation/searchbar_animation.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Flutter test'),
),
body: Center(
child: SearchBarAnimation(
textEditingController: TextEditingController(),
isOriginalAnimation: true,
enableKeyboardFocus: true,
onExpansionComplete: () {
debugPrint('APERTO');
},
onCollapseComplete: () {
debugPrint('CHIUSO');
},
onPressButton: (isSearchBarOpens) {
debugPrint("PRIMA DELL'APERTURA");
},
onChanged: (value) {
print(value);
},
trailingWidget: const Icon(
Icons.search,
size: 20,
color: Colors.black,
),
secondaryButtonWidget: const Icon(
Icons.close,
size: 20,
color: Colors.black,
),
buttonWidget: const Icon(
Icons.search,
size: 20,
color: Colors.black,
),
),
),
);
}
}
Ovviamente:
- mi limito a visualizzare il testo scritto, voi potreste per esercizio usarlo in qualche modo
- sempre per esercizio potreste costruire un layout più reale; io mi sono limitato a buttarlo li in mezzo per testarlo
Enjoy!
dart flutter searchbar_animation
Commentami!