Flutter Web Exam

Flutter 웹 예제

Flutter Web을 사용하여 간단한 웹 애플리케이션 예제를 만들어 보겠습니다. 이 예제는 기본적인 카운터 애플리케이션으로, 버튼을 클릭할 때마다 숫자가 증가하는 기능을 포함하고 있습니다.

1. Flutter 설치 및 설정

Flutter SDK가 설치되어 있지 않다면 Flutter 공식 웹사이트에서 설치합니다. 설치가 완료되면 다음 명령어로 웹 타겟을 활성화합니다:

flutter config --enable-web

2. 새로운 Flutter 프로젝트 생성

터미널에서 새로운 Flutter 프로젝트를 생성합니다:

flutter create my_web_app
cd my_web_app

3. 기본 코드 수정

lib/main.dart 파일을 열고 기본 코드를 다음과 같이 수정합니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Web Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

4. 웹 애플리케이션 실행

프로젝트 디렉토리에서 다음 명령어를 실행하여 웹 애플리케이션을 실행합니다:

flutter run -d chrome

위 명령어를 실행하면 기본 웹 브라우저에서 Flutter 애플리케이션이 실행됩니다. 버튼을 클릭할 때마다 카운터 값이 증가하는 것을 확인할 수 있습니다.

이 예제는 Flutter Web의 기본적인 사용법을 보여주며, 이를 바탕으로 더 복잡한 웹 애플리케이션을 개발할 수 있습니다. Flutter의 다양한 위젯과 플러그인을 활용하여 사용자 인터페이스와 기능을 확장해 보세요.

이런 자료를 참고했어요.
[1] Booil Jung – 웹을 위한 Flutter: 웹사이트를 밑바닥부터 만들고 배포하기 (https://booiljung.github.io/technical_articles/flutter/flutter_for_web_create_and_deploy_a_website_from_scratch.html)
[2] velog – [Flutter] 웹 개발자를 위한 플러터 (https://velog.io/@bluejoyq/Flutter-%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%94%8C%EB%9F%AC%ED%84%B0)
[3] Flutter – Samples (https://flutter.github.io/samples/)
[4] TISTORY – [Flutter] 플러터 Web 개발하는 법 – 코딩으로 세계정복 – 티스토리 (https://muhly.tistory.com/16)

뤼튼 사용하러 가기 > https://agent.wrtn.ai/5xb91l