[✈️] 항공권 가격 검색 앱 개발해보기 <4> 사용자 입력 UI

이번엔 항공권 검색 기능을 만들 것이다.
먼저 필요한 UI 요소를 생각해보면

<입력>
여행지 선택 (드롭다운)
날짜 입력 (캘린더)
검색 시작 (버튼)
출발편 / 도착편 (토글)

<출력>
1. 항공사 이름
2. 출발 시간
3. 가격
4. 예매 버튼
(위 4가지를 묶어 가격 오름차순으로 리스트)
정도가 있을 것 같다.

입력 요소부터 구현해보자.

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

 

드롭다운이나 DatePicker, Switch등은 상태가 바뀌는 UI이기 때문에
setState()로 선택값을 화면에 반영하기 위해
검색페이지는 StatefulWidget을 상속받는다.

class _SearchPageState extends State<SearchPage> {
  String _selectedDestination = '도쿄';
  DateTime? _selectedDate;
  int _flightTypeIndex = 0; // 0:출발편, 1:도착편
}

 

다음으로 여행지, 날짜, 출발/도착 상태변수를 정의하고 (Dropdown은 초기값 필요)

가로로 요소들을 배치하기 위해 구조를 정의한다.
화면 크기에 따라 대응하기 위해 Expanded를 사용하였다.
* Expanded는 반드시 부모가 Row, Column, Flex 중 하나여야 함

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildInputRow(), const SizedBox(height: 16),
          // 여기에 결과 출력할 예정
        ],
      ),
    );
  }

  Widget _buildInputRow() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(flex: 1, child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8), child: _buildDestinationDropdown(),),),
        Expanded(flex: 1, child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8), child: _buildDateButton(),),),
        Expanded(flex: 1, child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8), child: _buildFlightTypeToggle(),),),
        Expanded(flex: 1, child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8), child: _buildSearchButton(),),),
      ],
    );
  }

 

입력 부분에 들어갈 요소들을 하나씩 살펴보면

 

/// 여행지 선택
  Widget _buildDestinationDropdown() {
    return FittedBox(
      fit: BoxFit.scaleDown,
      child: DropdownButton<String>(
        value: _selectedDestination,
        items: ['도쿄', '오사카', '후쿠오카', '방콕']
            .map((destination) => DropdownMenuItem(value: destination, child: Text(destination),)).toList(),
        onChanged: (value) {
          setState(() {
            _selectedDestination = value!;
          });
        },
      ),
    );
  }

 

여행지 선택은 DropdownButton을 사용하였다.
유저가 드롭다운에서 여행지를 선택할 때 onChanged -> setState가 호출되어 값을 갱신한다.

/// 날짜 선택
  Widget _buildDateButton() {
    return ElevatedButton(
      onPressed: () async {
        final pickedDate = await showDatePicker(
          context: context,
          initialDate: _selectedDate ?? DateTime.now(),
          firstDate: DateTime.now(),
          lastDate: DateTime.now().add(const Duration(days: 365)),
        );

        if (pickedDate != null) {
          setState(() {
            _selectedDate = pickedDate;
          });
        }
      },
      child: Text(
        _selectedDate == null ? '날짜' : '${_selectedDate!.month}/${_selectedDate!.day}',
      ),
    );
  }

 

날짜 선택은 버튼과 DatePicker를 사용하였다.
ElevateButton을 누르면 showDatePicker로 날짜를 선택할 수 있게 달력을 표시하고 날짜가 선택되면 마찬가지로 값을 갱신한다.

/// 출발편/도착편 토글
  Widget _buildFlightTypeToggle() {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _flightTypeIndex = 0;
              });
            },
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: BoxDecoration(
                border: Border.all(color: _flightTypeIndex == 0 ? Colors.blue : Colors.grey,),
                borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), bottomLeft: Radius.circular(4),),
                color: _flightTypeIndex == 0 ? Colors.blue.withValues(alpha: 0.1) : Colors.transparent,
              ),
              child: FittedBox(fit: BoxFit.scaleDown, child: Text('출발', textAlign: TextAlign.center,),),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _flightTypeIndex = 1;
              });
            },
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: BoxDecoration(
                border: Border.all(color: _flightTypeIndex == 1 ? Colors.blue : Colors.grey,),
                borderRadius: const BorderRadius.only(topRight: Radius.circular(4),bottomRight: Radius.circular(4),),
                color: _flightTypeIndex == 1 ? Colors.blue.withValues(alpha: 0.1) : Colors.transparent,
              ),
              child: FittedBox(fit: BoxFit.scaleDown, child: Text('도착', textAlign: TextAlign.center,),),
            ),
          ),
        ),
      ],
    );
  }

 

출발편/도착편 토글은 현재 어떤 상태인지 보여주기 위해 텍스트를 추가했고
ToggleButtons가 더 간편하지만, ToggleButtons는 UI 최소 크기를 강제하여 내 경우처럼 한 줄에 여러 UI를 배치할 경우 UI끼리 겹치는 상황이 발생하기 때문에 대신 GestureDetector를 사용했다.
 
마지막으로 검색 시작 버튼을 만들어 사용자가 입력한 값을 이용해 검색에 사용할 것이다.

일단 더미데이터로 리스트 출력부터 구현해보자.

 

class TicketResult {
  final String airline;
  final String departTime;
  final int price;

  TicketResult({
    required this.airline,
    required this.departTime,
    required this.price,
  });
}

List<TicketResult> _results = [];

  List<TicketResult> testTickets({required String destination, required DateTime date,}) {
    return [
      TicketResult(
        airline: 'Korean Air',
        departTime: '08:30',
        price: 180000,
      ),
      TicketResult(
        airline: 'Asiana',
        departTime: '10:10',
        price: 150000,
      ),
      TicketResult(
        airline: 'Jeju Air',
        departTime: '14:45',
        price: 120000,
      ),
    ];
  }

 

형식을 정의해준 뒤 테스트용 데이터를 만들고, 검색 버튼의 onPressed에 함수를 하나 만들어 연결해준다.

void onSearchPressed() {
    final results = testTickets(
      destination: _selectedDestination,
      date: _selectedDate,
    );

    results.sort((a, b) => a.price.compareTo(b.price));

    setState(() {
      _results = results;
    });
  }

 

그리고 아까 만든 입력 UI 아래에 리스트뷰를 추가해준다.

Widget _buildOutput()
  {
    return Expanded(
      child: _results.isEmpty ? const Center(child: Text('검색 결과 없음')) :
      ListView.builder(
        itemCount: _results.length,
        itemBuilder: (context, index) {
          final flight = _results[index];
          return ListTile(
            title: Text(flight.airline),
            subtitle: Text('출발 ${flight.departTime}'),
            trailing: Text('${flight.price}원'),
          );
        },
      ),
    );
  }

 

테스트 데이터 출력

 

테스트용으로 하드코딩한 데이터가 잘 나오는 모습이다.
다음은 실제 데이터 로드를 구현해 볼 예정이다.