Flutter: 웹사이트 스토리

I Choudhry가 다른 프로젝트로 다시 돌아왔습니다. 이제 2022년에 누가 개인 웹사이트가 필요한지 생각하고 있을 수 있습니다. Twitter에 똥 게시하거나 고가 아파트의 일반적인 b-roll 또는 Instagram에서 한 곳의 전망과 함께 가짜 깨어 생산성 캡션을 게시하고 하루라고 부를 수 있습니다. 당신 말이 맞겠지만 어쨌든 나는 하나를 만들었습니다. choudhryamjad.com



진지해도 될까요, 진지하게 합시다. 그들의 소셜 Linktr.ee, wlo.link 및 목록의 링크 웹 사이트를 갖는 콘텐츠 작성자의 사랑은 계속됩니다. 해당 웹 사이트는 사용자 정의 배경과 같은 멍청한 것에 대해 비용을 청구합니다. 제3의 눈을 뜨고 생각해 봅시다.

우리는 쉽게 우리 자신을 만들 수 있으며 내가 호스트하는 방법과 아직 한푼도 지불하지 않은 방법을 알려 드리겠습니다.

먼저 웹 개발 프로젝트에서 반응보다 Flutter를 사용한 이유에 대해 답해 보겠습니다.

Flutter over React

플러터를 가지고 놀기 전에 나는 반응을 시도했습니다. 약간의 타이프스크립트를 알고 있다고 생각했는데 한 번 시도해 보겠습니다. 재미가 없었습니다.



박쥐 상태에서 바로 아바타 상태에 액세스하고 typescript를 사용하기 위해 템플릿 플래그를 추가하는 계시가 있다는 것이 밝혀졌습니다.
npx create-react-app name-of-app --template typescript
결국 나는 이메일을 받아 저장하는 간단한 웹 앱을 만들었고 스크린샷이나 그런 것이 있으면 좋겠지만 당시의 웹 개발은 내 목표가 아니었습니다. 그냥 버리려는 시도였습니다. 그래서 몇 년 동안 웹 개발자를 다시 만지지 않았습니다. 나도 상용구 코드의 산을 좋아하지 않았다. 그래서 반응할 수 있습니다KISS 내 엉덩이. 요즘 반응이 그렇게 나쁘지는 않은 것 같다.

Flutter로 제작

Flutter로 작업하면서 좋은 점을 발견한 몇 가지 점을 만질 것입니다. 하지만 이것은 튜토리얼이 아닙니다. Youtube에서 찾을 수 있습니다. 이것은 더 많은 논평입니다.

Flutter에는 Dart라는 하나의 프로그래밍 언어가 포함되어 있습니다. 이것은 주로 라이브러리, 서버 및 시스템 개발자로서 저에게 중요합니다. abc로 묶인 xyz 비트를 원하지 않습니다. Lars Bak과 Kasper Lund 디자이너들에게도 좋은 언어입니다. 정적으로 형식이 지정되며 해석된 컴파일러 언어이므로 실행할 때마다 컴파일할 필요가 없습니다. 핫 리로드는 정말 좋습니다.

아키텍처는 무엇입니까? Flutter 개발에는 위젯 트리에서 함께 유지되는 상태 저장/상태 비저장 위젯이 포함됩니다. 예를 들어 텍스트가 있고 그것을 가운데로 옮기고 싶다고 가정해 봅시다.

Center(
    child: Text(
      text,
      style: const TextStyle(
        fontSize: 15,
        fontWeight: FontWeight.bold,
        color: Color(0xff586e75),
      ),
    ),
  )

와~ 직관적인 디자인이죠?

반응형 디자인을 원하십니까? 괜찮아요!

double screenWidth = MediaQuery.of(context).size.width;
 Flex(
      direction: screenWidth > 1100 ? Axis.horizontal : Axis.vertical,
)

플렉스를 때리고 구성 요소 주위를 다시 섞습니다. 모바일과 데스크탑용으로 다른 디자인을 원하십니까?

  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    if (screenWidth > 750) {
      return desktop(context, screenWidth);
    }
    return mobile(context, screenWidth);
  }
}

이것은 좋은 방법이 아닐 수도 있지만 간단하고 내가 그냥 뱉어내는 동안 효과가 있었습니다. 위젯에 대한 생각에 익숙해지면 위젯과 하나가 되고 문제에 대한 흥미로운 접근 방식을 생각할 수 있습니다.

const CircleAvatar(
          radius: 100.0,
          backgroundColor: Color(0xffb58900),
          child: CircleAvatar(
            radius: 95.0,
            backgroundImage: AssetImage("assets/images/avi.jpg"),
          ),
        ),

그렇게 해서 홈페이지에 있는 그림 주위에 테두리를 만들었습니다. 원 안에 원입니다.



위젯을 여러 개 묶기만 하면 나와 같은 바보라도 괜찮은 반응형 웹사이트를 만들 수 있습니다.

전개

배포가 어렵다는 점을 먼저 말씀드리지만 플러터+파이어베이스 생태계는 좋습니다. 몇 가지 명령을 실행하고 비즈니스에서 붐을 일으켰습니다. 방금 문서here를 따랐고 모든 것이 잘되었습니다.

며칠 동안 한푼도 청구되지 않았고 청구해야 할 조회수를보고 있습니다. 지불할 필요가 없습니다.

마지막 단어

새로운 것을 찾고 있다면 Flutter를 사용해 보세요.

나는 변덕에 내 임의의 프로젝트와 함께 이러한 게시물을 만들기 시작했다고 말하면서 이것을 끝낼 것입니다. 내 사고 과정은 방귀였습니다. 나는 확실히 이 포스트의 질에 있는 더 크고 더 나은 프로젝트를 만들 것이다. 상관없이 읽어주셔서 감사합니다!

트위터에서 저를 팔로우하세요: