Flutter 기반 크로스 플랫폼 웹 개발

아토믹데브_12_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

atomicdev 2024. 8. 15. 09:43
728x90

12강: Bootstrap 폼 디자인 및 연동

내용 요약

  1. Bootstrap을 사용한 폼 디자인:
    • Bootstrap은 웹에서 폼을 디자인할 때 유용한 CSS 클래스를 제공합니다. 간결하고 반응형 폼을 쉽게 만들 수 있으며, 다양한 입력 필드, 버튼, 레이아웃 옵션을 제공합니다.
    • Bootstrap 폼 구성 요소:
      • form-group: 폼 필드를 그룹화하는 클래스.
      • form-control: 텍스트 입력 필드, 선택 상자 등의 스타일링을 위한 클래스.
      • form-check: 체크박스와 라디오 버튼의 스타일링을 위한 클래스.
      • btn: 버튼 스타일링을 위한 클래스.
  2. Flutter와의 연동 방법:
    • Flutter 웹 프로젝트에서 Bootstrap을 활용하여 폼을 디자인한 후, 사용자 입력을 처리할 수 있습니다.
    • Bootstrap 폼을 HtmlElementView를 통해 Flutter UI에 삽입하고, JavaScript나 Flutter 내에서 입력 데이터를 처리하는 방식으로 연동할 수 있습니다.

실습

1. Bootstrap을 사용하여 반응형 폼 디자인

  • 프로젝트 설정:
    • Flutter 웹 프로젝트에서 index.html 파일에 Bootstrap을 추가합니다. <head> 태그 내에 Bootstrap CSS를 포함합니다: 
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  • Bootstrap 폼 예제 코드:
    • web/index.html 파일에 Bootstrap을 사용하여 반응형 폼을 구성합니다: 
      <div class="container mt-5">
  <h2>Contact Us</h2>
  <form id="contact-form">
    <div class="form-group">
      <label for="name">Name</label>
      <input 
        type="text" 
        class="form-control" 
        id="name" 
        placeholder="Enter your name">
    </div>
    <div class="form-group">
      <label for="email">Email address</label>
      <input 
        type="email" 
        class="form-control" 
        id="email" 
        placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea 
        class="form-control" 
        id="message" 
        rows="3" 
        placeholder="Enter your message">
      </textarea>
    </div>
    <button 
      type="submit" 
      class="btn btn-primary">
      Submit
    </button>
  </form>
</div>
    • 코드 설명:
      • container: 폼이 포함된 컨테이너로, 폼을 중앙에 정렬하고 여백을 추가합니다.
      • form-group: 각 입력 필드를 그룹화하여 폼의 레이아웃을 구성합니다.
      • form-control: 입력 필드와 텍스트 영역을 스타일링하기 위해 사용됩니다.
      • btn: 제출 버튼을 스타일링합니다. btn-primary 클래스를 사용하여 Bootstrap의 기본 파란색 버튼 스타일을 적용했습니다.

2. Flutter에서 Bootstrap 폼을 활용한 사용자 입력 처리

  • Flutter와 Bootstrap 폼 연동:
    • Flutter의 lib/main.dart 파일에서 HtmlElementView를 사용하여 Bootstrap 폼을 Flutter 앱에 포함시킵니다: 
      import 'package:flutter/material.dart';
import 'dart:html' as html;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter & Bootstrap Form'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Please fill out the form below:',
                style: TextStyle(fontSize: 20),
              ),
              const SizedBox(height: 20),
              HtmlElementView(viewType: 'contact-form'),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _handleFormSubmission,
                child: const Text('Submit Form'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  static void _handleFormSubmission() {
    // 여기에서 JavaScript를 사용하여 폼 데이터를 처리할 수 있습니다.
    html.window.alert('Form Submitted!');
  }
}
       
    • 코드 설명:
      • HtmlElementView: Bootstrap 폼을 Flutter 위젯으로 포함시킵니다. viewType으로 HTML 요소의 ID를 지정하여 Flutter UI에 삽입합니다.
      • _handleFormSubmission 함수: 제출 버튼을 클릭했을 때 호출됩니다. JavaScript를 사용하여 폼 데이터를 처리하거나, 간단히 알림 창을 띄울 수 있습니다.

3. 프로젝트 실행 및 UI 확인

  • Flutter 프로젝트 실행:
    • 터미널에서 다음 명령어를 실행하여 Flutter 웹 애플리케이션을 실행합니다: 
      flutter run -d chrome
    • 웹 브라우저에서 앱이 실행되며, Bootstrap 폼이 Flutter 앱에 포함된 것을 확인할 수 있습니다.
  • 폼 제출 및 데이터 처리:
    • 폼에 데이터를 입력하고 "Submit Form" 버튼을 클릭하여 제출 과정을 테스트합니다. 제출 후, window.alert를 통해 폼이 성공적으로 제출되었음을 알리는 메시지가 표시됩니다.

스크린샷

  1. Bootstrap 폼 구성 화면:
    • 위에서 작성한 Bootstrap 폼의 HTML 코드와, 실제 폼이 브라우저에 표시된 화면의 스크린샷을 제공합니다.
  2. Flutter와 결합된 폼 실행 결과:
    • Flutter 앱에 Bootstrap 폼이 포함된 결과 화면을 캡처합니다. 폼이 올바르게 표시되고, 제출 버튼 클릭 시 알림 메시지가 나타나는지 확인할 수 있습니다.

이 강의를 통해 여러분은 Bootstrap을 사용하여 폼을 디자인하고, 이를 Flutter와 연동하여 웹 애플리케이션에서 사용자 입력을 처리하는 방법을 학습했습니다. 이러한 기술을 활용하면 반응형 폼 디자인과 Flutter의 강력한 기능을 결합하여 더 나은 사용자 경험을 제공할 수 있습니다. 앞으로의 강의에서는 더욱 고급 기능을 탐구해 보겠습니다.

728x90

'Flutter 기반 크로스 플랫폼 웹 개발' 카테고리의 다른 글

Flutter로 "Hello World" 출력하는 웹사이트 만들기(feat. VS Code)  (2) 2024.10.16
아토믹데브_13_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (27) 2024.08.15
아토믹데브_11_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15
아토믹데브_10_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (26) 2024.08.15
아토믹데브_9_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발  (28) 2024.08.15

'Flutter 기반 크로스 플랫폼 웹 개발'의 다른글

  • 현재글아토믹데브_12_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

관련글

티스토리툴바