Flutter Web 1탄 : 구글 코드랩 구현

 

Flutter 2.0 이 출시됨에 따라.

Web 개발 또한 정식으로 가능해졌습니다.

오늘은 Flutter 로 Web 개발을 어떻게 하는지 알아보도록 하겠습니다.

이번 글은 아래의 자료를 기반으로 작성됐습니다.

 

1. Write your first Flutter app on the web

 

이 글에서 알아볼 내용

1. 간단한 실행
2. 코드랩 개요
3. 코드랩 구현
4. 구현 중 느낀 점

 

간단한 실행

들어가기 앞서 Web으로 한번 실행시켜 보도록 하겠습니다.

작동 코드는 새 프로젝트 생성시 있는 카운트 프로그램입니다.

 

 

간단히 실행시켜보니 앱개발과 크게 다른게 없는 느낌입니다.

물론 UI 배치는 Web 화면에 맞게 수정해야겠지만.

그 외에는 그냥 앱개발과 똑같은 것 같습니다.

 

코드랩 개요

해당 코드랩은 정말 간단합니다.

회원가입을 하고 완료시에는 Welcome 페이지를 보여줍니다.

특별한 점이라고 한다면 회원가입 시의 ProgressBar의 애니메이션 구현 정도입니다.

하지만 그 애니메이션 정도가 어렵지 않아서 걱정하실 필요 없습니다.

더 자세한 내용을 확인하고 싶으시면 아래의 링크를 확인해주세요.

 

Write your first Flutter app on the web

 

코드랩 구현

이번 코드랩에는 Null Safety가 적용됐습니다.

pubspec.yaml 에서 sdk를 2.12.0 이상으로 설정해주세요.

 

이번 구현은 정말 간단합니다.

구차한 설명보다는 정리된 전체 코드가 더 좋을 것 같습니다. 

코드와 구현된 화면을 공유드리는 것으로 설명을 대체하겠습니다.

그럼 바로 시작하겠습니다.

 

1. 코드

import 'package:flutter/material.dart';

void main() => runApp(SignUpApp());

class SignUpApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => SignUpScreen(),
        '/welcome': (context) => WelcomeScreen(),
      },
    );
  }
}

class SignUpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: SizedBox(
          width: 400,
          child: Card(
            child: SignUpForm(),
          ),
        ),
      ),
    );
  }
}

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Welcome!', style: Theme.of(context).textTheme.headline2),
      ),
    );
  }
}

class SignUpForm extends StatefulWidget {
  @override
  _SignUpFormState createState() => _SignUpFormState();
}

class _SignUpFormState extends State<SignUpForm> {
  final _firstNameTextController = TextEditingController();
  final _lastNameTextController = TextEditingController();
  final _usernameTextController = TextEditingController();

  double _formProgress = 0;

  void _updateFormProgress() {
    var progress = 0.0;
    final controllers = [
      _firstNameTextController,
      _lastNameTextController,
      _usernameTextController
    ];

    for (final controller in controllers) {
      if (controller.value.text.isNotEmpty) {
        progress += 1 / controllers.length;
      }
    }

    setState(() {
      _formProgress = progress;
    });
  }

  void _showWelcomeScreen() {
    Navigator.of(context).pushNamed('/welcome');
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      onChanged: _updateFormProgress,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          AnimatedProgressIndicator(value: _formProgress),
          Text('Sign up', style: Theme.of(context).textTheme.headline4),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: TextFormField(
              controller: _firstNameTextController,
              decoration: InputDecoration(hintText: 'First name'),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: TextFormField(
              controller: _lastNameTextController,
              decoration: InputDecoration(hintText: 'Last name'),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: TextFormField(
              controller: _usernameTextController,
              decoration: InputDecoration(hintText: 'Username'),
            ),
          ),
          TextButton(
            style: ButtonStyle(
              foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
                return states.contains(MaterialState.disabled) ? null : Colors.white;
              }),
              backgroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
                return states.contains(MaterialState.disabled) ? null : Colors.blue;
              }),
            ),
            onPressed: _formProgress == 1 ? _showWelcomeScreen : null,
            child: Text('Sign up'),
          ),
        ],
      ),
    );
  }
}

class AnimatedProgressIndicator extends StatefulWidget {
  final double value;

  AnimatedProgressIndicator({
    required this.value,
  });

  @override
  State<StatefulWidget> createState() {
    return _AnimatedProgressIndicatorState();
  }
}

class _AnimatedProgressIndicatorState extends State<AnimatedProgressIndicator>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;
  late Animation<double> _curveAnimation;

  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: Duration(milliseconds: 1200), vsync: this);

    final colorTween = TweenSequence([
      TweenSequenceItem(
        tween: ColorTween(begin: Colors.red, end: Colors.orange),
        weight: 1,
      ),
      TweenSequenceItem(
        tween: ColorTween(begin: Colors.orange, end: Colors.yellow),
        weight: 1,
      ),
      TweenSequenceItem(
        tween: ColorTween(begin: Colors.yellow, end: Colors.green),
        weight: 1,
      ),
    ]);

    _colorAnimation = _controller.drive(colorTween);
    _curveAnimation = _controller.drive(CurveTween(curve: Curves.easeIn));
  }

  void didUpdateWidget(oldWidget) {
    super.didUpdateWidget(oldWidget);
    _controller.animateTo(widget.value);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) => LinearProgressIndicator(
        value: _curveAnimation.value,
        valueColor: _colorAnimation,
        backgroundColor: _colorAnimation.value?.withOpacity(0.4),
      ),
    );
  }
}

 

2. 화면

 

구현 중 느낀 점

정말 간단한 구현이긴 하였지만.

Flutter Web의 매력을 느낀 것 같습니다.

기존에 Flutter로 앱개발을 해본 사람이라면 진입장벽이 상당히 낮습니다.

즉 별다른 학습에 공을 들이지 않아도 웹개발을 시작할 수 있습니다.

 

퍼포먼스에 관해서는 아직 잘모르나.

현재 Flutter가 IOS, Android 환경에서 보여주고 있는 퍼포먼스를 보면.

충분히 사용해볼만하다고 생각합니다.

 

여기에 Desktop까지 개발할 수 있으니.

잘만 구성한다면 하나의 코드로 Mobile, Web, Desktop 을 지원할 수 있지 않을까.

막연한 기대를 해볼 수 있는 것 같습니다.

 

마치면서

이번 구현은 너무 간단했습니다.

다음번에는 좀 더 심화된 구현을 해보도록 하겠습니다.

그에 따라 정말 실제 서비스에 사용할만한지 파악해보도록 하겠습니다.

긴 글 읽어주셔서 감사합니다.

 

질문은 언제나 환영입니다 :)