[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 키워드에 해당하는 뉴스 기사를 검색하는 뉴스 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 프로젝트에서는 Flutter의 Stepper 위젯을 사용하여 키워드에 해당하는 뉴스 기사를 검색하는 애플리케이션을 만들어보겠습니다.

Stepper 위젯 소개

Stepper는 단계별로 사용자 입력을 받을 수 있는 위젯입니다. 각 단계는 사용자가 선택한 행동에 따라 다른 화면이 표시될 수 있습니다. 이를 통해 애플리케이션 내에서 순차적인 작업을 수행할 수 있습니다.

프로젝트 구조

프로젝트를 시작하기 전에 먼저 프로젝트 구조를 설계해야 합니다. 아래와 같은 구조로 프로젝트를 구성해보겠습니다:

- lib/
  - main.dart
  - screens/
    - keyword_screen.dart
    - news_screen.dart
    - results_screen.dart

main.dart 파일은 애플리케이션의 진입점이 되는 파일입니다.
screens 폴더에는 각 단계별 화면을 위한 파일들이 있습니다. keyword_screen.dart는 키워드 입력 화면, news_screen.dart는 뉴스 검색 화면, results_screen.dart는 검색 결과 화면입니다.

키워드 입력 화면 구현

첫 번째 단계로는 사용자가 검색할 키워드를 입력할 수 있는 화면을 구현해보겠습니다. keyword_screen.dart 파일을 열고 아래와 같은 코드를 작성해보세요:

import 'package:flutter/material.dart';

class KeywordScreen extends StatefulWidget {
  @override
  _KeywordScreenState createState() => _KeywordScreenState();
}

class _KeywordScreenState extends State<KeywordScreen> {
  String keyword;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Step 1: Enter Keyword'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextFormField(
              onChanged: (value) {
                setState(() {
                  keyword = value;
                });
              },
              decoration: InputDecoration(
                labelText: 'Enter keyword',
              ),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/news_screen', arguments: keyword);
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 KeywordScreen 클래스를 정의하고, 사용자가 키워드를 입력하고 다음 단계로 진행하기 위한 화면을 구현했습니다. 사용자가 텍스트 필드에 입력한 값을 keyword 변수에 저장하고, ‘Next’ 버튼을 누를 때 /news_screen 경로로 이동하며 keyword 값을 인자로 전달합니다.

뉴스 검색 화면 구현

두 번째 단계로는 사용자가 선택한 키워드에 해당하는 뉴스를 검색하는 화면을 구현해보겠습니다. news_screen.dart 파일을 열고 아래와 같은 코드를 작성해보세요:

import 'package:flutter/material.dart';

class NewsScreen extends StatelessWidget {
  final String keyword;

  NewsScreen({this.keyword});

  @override
  Widget build(BuildContext context) {
    // 뉴스 검색 로직 작성

    return Scaffold(
      appBar: AppBar(
        title: Text('Step 2: Search News'),
      ),
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

위 코드에서는 NewsScreen 클래스를 정의하고, keyword 값을 인자로 받아옵니다. 이후 뉴스 검색 로직을 작성할 예정이므로, 현재는 로딩 중임을 알리기 위해 로딩 표시기를 화면에 표시하도록 했습니다.

검색 결과 화면 구현

세 번째 단계로는 검색된 뉴스 결과를 보여주는 화면을 구현해보겠습니다. results_screen.dart 파일을 열고 아래와 같은 코드를 작성해보세요:

import 'package:flutter/material.dart';

class ResultsScreen extends StatelessWidget {
  final String keyword;
  final List<String> newsResults;

  ResultsScreen({this.keyword, this.newsResults});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Step 3: Results'),
      ),
      body: ListView.builder(
        itemCount: newsResults.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(newsResults[index]),
          );
        },
      ),
    );
  }
}

위 코드에서는 ResultsScreen 클래스를 정의하고, keyword 값을 표시하고 검색된 뉴스 결과를 표시하는 화면을 구현했습니다. newsResults 리스트에 있는 각 뉴스 기사를 ListView.builder를 사용하여 표시했습니다.

애플리케이션 전체 구현

이제 모든 단계의 화면을 만들었으므로, main.dart 파일을 열고 아래와 같은 코드로 전체 애플리케이션을 구현해보세요:

import 'package:flutter/material.dart';
import 'package:news_app/screens/keyword_screen.dart';
import 'package:news_app/screens/news_screen.dart';
import 'package:news_app/screens/results_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'News App',
      initialRoute: '/',
      routes: {
        '/': (context) => KeywordScreen(),
        '/news_screen': (context) => NewsScreen(),
        '/results_screen': (context) => ResultsScreen(),
      },
    );
  }
}

위 코드에서는 애플리케이션 진입점인 main() 함수를 정의하고, MyApp 클래스를 정의하여 애플리케이션을 구성했습니다. MaterialApp을 사용하여 애플리케이션의 라우트를 정의하고, 각 라우트의 화면에 대한 클래스를 매핑했습니다.

실행 및 테스트

이제 모든 코드 작성이 완료되었습니다. 애플리케이션을 실행하여 각 단계의 화면이 순서대로 표시되는지 확인해보세요.

위에서 구현한 코드는 키워드 입력 화면에서 키워드를 입력한 후, ‘Next’ 버튼을 누르면 뉴스 검색 화면으로 이동합니다. 이후 검색 로직은 작성하지 않았으므로 로딩 표시기만 보여질 것입니다. 마지막으로 결과 화면에서는 뉴스 검색 결과를 리스트로 표시하는 것을 확인할 수 있습니다.

이와 같이 Flutter의 Stepper 위젯을 사용하여 사용자가 선택한 키워드에 해당하는 뉴스 기사를 검색하는 애플리케이션을 구현할 수 있습니다.