Flutter flappy_search_bar 사용법
flappy_search_bar가 DISCONTINUED입니다.
대안으로 Flappy_search_bar_fork 사용
20210921 업데이트
flappy_search_bar 사용법
Flutter 패키지인 flappy_search_bar 사용법 망각록
개발 환경
PC : macOS Catalina
편집기 : Visual Studio Code
Flutter : 1.22.1
flappy_search_bar : 1.7.2(2021/2/16 현재 최신 버전)
제작물
아래 이미지와 같은 검색창 만들기
검색 시
코드
pubspec.yaml
dependencies:
flutter:
sdk: flutter
flappy_search_bar: ^1.7.2 <- 追加
・
・
・
main.dart
import 'package:flutter/material.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(),
),
);
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
var _itemsizeheight = 65.0;
var posSelected = 0;
final _searchBarController = SearchBarController();
List<String> exampleList = [
'Axvfgfdg',
'Axvfgfdg3',
'Bsdadasd',
'Axvfgfdg2',
'Bsdadasd3',
'Cat',
'Bsdadasd2',
'Cat2',
'Cat3',
'Dog',
'Dog2',
'Dog3',
'Elephant',
'Elephant2',
'Elephant3',
'Fans',
'Girls',
'Hiiii',
'Ilu',
'Jeans',
'Kite',
'Lion',
'Men',
'Nephow',
'Owl',
'Please',
'Quat',
'Rose',
'Salt',
'Trolly',
'Up',
'View',
'Window',
'Xbox',
'Yellow',
'Yummy',
'Zubin',
'Zara',
'Fans2',
'Girls2',
'Hiiii2',
'Ilu2',
'Jeans2',
'Kite2',
'Lion2',
'Men2',
'Nephow2',
'Owl2',
'Please2',
'Quat2',
'Rose2',
'Salt2',
'Trolly2',
'Up2',
'View2',
'Window2',
'Xbox2',
'Yellow2',
'Yummy2',
'Zubin2',
'Zara2',
'あいうえお',
'12345'
];
@override
void initState() {
exampleList.sort((a, b) {
return a.toString().compareTo(b.toString());
});
super.initState();
}
// 検索する文字を含む文字列のリストを返す
Future<List<String>> _search(String text) async {
var tmpList = [];
tmpList.addAll(
exampleList.where(
(element) => element.contains(text),
),
);
return tmpList;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SearchBar<String>(
searchBarPadding: EdgeInsets.symmetric(horizontal: 10),
minimumChars: 1, //検索時の最小文字数
hintText: "検索",
cancellationWidget: Text("キャンセル"),
onSearch: _search,
placeHolder: Center( //デフォルトで表示する内容
child: ListView.builder(
itemCount: exampleList.length,
itemExtent: _itemsizeheight,
itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
exampleList[position],
style: TextStyle(fontSize: 20.0),
),
),
);
},
),
),
//検索文字を含んでいた文字列をCardで表示
onItemFound: (String word, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
word,
style: TextStyle(fontSize: 14.0),
),
),
);
},
// 検索時のローディング
loader: Center(
child: Text("loading..."),
),
// 検索でエラーになった時
onError: (error) {
print(error);
return Center(
child: Text("Error occurred : $error"),
);
},
),
),
);
}
}
참고
Reference
이 문제에 관하여(Flutter flappy_search_bar 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mkurom/items/e94b60eea15d4239ac43텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)