[flutter] FlatButton을 사용하여 검색 기능을 추가하는 방법은?

26 Dec 2023

flutter

Flutter에서 검색 기능을 추가하는 방법은 다양합니다. 여러 방법 중 하나는 FlatButton을 사용하여 간단하게 검색 기능을 구현하는 것입니다.

1. 검색 버튼과 입력 필드 추가

먼저, 화면에 검색 버튼과 검색어를 입력할 수 있는 텍스트 필드를 추가합니다.

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('검색'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              _performSearch(_searchController.text);
            },
          )
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          controller: _searchController,
          decoration: InputDecoration(
            labelText: '검색어를 입력하세요',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }

  void _performSearch(String keyword) {
    // TODO: 검색 기능 구현
    print('검색어: $keyword');
  }
}

void main() {
  runApp(MaterialApp(
    home: SearchPage(),
  ));
}

위의 예시 코드는 SearchPage라는 StatefulWidget을 만들고, AppBar에 검색 버튼을 추가하고, 검색어를 입력할 수 있는 TextField를 추가한 것입니다.

2. 검색 기능 구현

검색 버튼을 누를 때, 입력된 검색어를 이용하여 실제 검색 기능을 구현할 수 있습니다. _performSearch 메소드에서 실제 검색 로직을 구현할 수 있습니다.

void _performSearch(String keyword) {
  // TODO: keyword를 이용한 검색 로직 구현
  print('검색어: $keyword');
  // 여기서부터 실제 검색 동작 수행
}

3. 검색 결과 표시

검색 결과를 화면에 표시하는 방법은 다양합니다. ListView나 GridView 등을 사용하여 검색 결과를 목록 형태로 표시할 수 있습니다.

마치며

위와 같이 간단하게 FlatButton을 사용하여 검색 기능을 추가할 수 있습니다. 검색 결과를 표시하고, 검색 동작을 수행하는 부분은 실제 서비스에 따라 다양하게 구현할 수 있습니다.

참고: Flutter 공식 문서 - FlatButton