[Flutter] 뭐든 따라해보기

31 Mar 2021 in Devlog on Flutter

• Momentum 프론트 디자인 따라해보기
  • Momentum 디자인
  • 코드

이제는 Flutter 를 활용하여 기존에 상용화된 다른 Application 을 한번 따라 만들어 볼 것입니다.

여기서 제고 참고로 할 Application 은 Google Chrome Extension 중 하나인 Momentum 입니다. 다. * Momentum 설치

Momentum 은 Chrome 의 첫 시작화면에 다양한 이미지, 문구를 나타내 주기도 하며, 시계, 날씨 와 같은 정보 뿐 아니라, Todo list, Focus Memo 와 같은 기능을 제공해 주기도 합니다. 여기서는 대략적인 프론트 형태만 따라할 계획이니, 이 후 세세한 부분은 하나씩 추가 및 발전시켜 보시기 바랍니다.

Momentum 프론트 디자인 따라해보기

Momentum 디자인

코드

이전에 설명드렸던 기능들을 통해 Momentum 디자인을 일부 구현한 것입니다.

물론, 여기서는 제한된 기능만을 썼기 때문에 실제 동작도 하지 않으며, 화면 크기 등에 따라 문제가 생길 수도 있습니다. 이러한 부분은 구글링 또는 다른 사람들의 프로젝트를 참고하여 하나씩 개선해보시기 바랍니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: Theme.of(context).textTheme.apply(
          bodyColor: Colors.white,
          displayColor: Colors.white,
        )
      ),
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: Links(),
            ),
            Align(
              alignment: Alignment.topRight,
              child: Weather(),
            ),
            Column(
              children: [
                Flexible(child: Container(),),
                Clock(),
                Flexible(child: Center(child: Focus()),),
              ],
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Todo(),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Quotes(),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Setting(),
            )
          ],
        ),
      )
    );
  }
}

class Links extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("Links"),
        Container(height: 0, width: 10,),
        Icon(Icons.search, color: Colors.white,),
      ],
    );
  }
}

class Clock extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("15:49", style: TextStyle(fontSize: 150),);
  }
}

class Focus extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text("What is your main focus for today?", style: TextStyle(fontSize: 30),),
          TextField(
            enabled: false,
            decoration: InputDecoration(
              disabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.white
                )
              ),
            ),
          ),
        ],
      ),
    );
  }
}


class Weather extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Icon(Icons.wb_sunny_outlined, color: Colors.white,),
        Container(height: 0, width: 10,),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("14º", style: TextStyle(fontSize: 20),),
            Text("Seoul", style: TextStyle(fontSize: 10),),
          ],
        )
      ],
    );
  }
}

class Todo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Todo");
  }
}

class Quotes extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('"Always walk through life as if you have something new to learn nad you will."');
  }
}

class Setting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(Icons.settings, color: Colors.white,);
  }
}