Flutter Chapter: 1을 사용하는 Mi 카드

빠르게 성장하는 이 세상에서 모든 사람은 자신의 정체성을 갖는 경향이 있습니다. 그런 분들을 위해 플러터를 이용한 미니멀한 mi카드 개발을 생각했습니다. 이 mi 카드를 개발하는 것은 두 가지 방법으로 수행할 수 있습니다. 하나는 일을 훨씬 더 쉽게 만드는 미리 정의된 카드 클래스를 사용하는 것이고 다른 하나는 자신의 코드에 대한 자신의 차원을 제공하는 것입니다. 나는 그들 각각에 대해 블로그를 작성하는 것을 생각했습니다. 그래서 카드클래스를 이용하여 mi카드를 개발하는 제 첫 블로그입니다.

코딩을 시작하기 전에 몇 가지 기본 작업을 수행해야 합니다. 먼저 mi 카드에 표시할 이미지를 가져오고 그에 따라 다음을 따르십시오.

프로젝트 섹션으로 이동하여 프로젝트 이름을 마우스 오른쪽 버튼으로 클릭합니다.

새로 만들기로 이동한 다음 새 디렉터리 만들기를 선택합니다.

디렉토리 이름을 이미지로 지정하십시오.

이미지를 해당 이미지 섹션으로 드래그합니다.

같은 방법으로 다른 디렉토리를 만들고 글꼴로 이름을 지정하십시오.

이제 다음 링크로 이동합니다: https://fonts.google.com/ Pacifico를 검색하면 글꼴이 표시되고 다운로드만 하면 됩니다.

zip을 추출하면 많은 글꼴 음영을 얻을 수 있습니다. 그러나 Pacifico-Regular.tttf를 글꼴 섹션으로 드래그합니다.

이제 다시 동일한 링크로 이동하여 Source Sans Pro를 검색하면 글꼴을 다운로드할 수 있습니다.

압축을 풀고 SourceSansPro-Regular.tttf를 글꼴 섹션으로 드래그합니다.

마지막으로 다음과 같이 나타납니다.

Bharadwaj2.jpeg 대신 이미지 이름이 있을 수 있습니다. 문제 없습니다.

코딩 부분으로 가기 전에 pubsec.yaml 파일을 두 번 클릭하여 엽니다. 위의 이미지에서 위치를 찾을 수 있습니다. 전체 섹션을 지우고 아래 코드를 붙여넣습니다.

name: mi_card
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - images/bharadwaj2.jpeg

  fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

    - family: Source
      fonts:
        - asset: fonts/SourceSansPro-Regular.ttf

Bharadwaj2.jpeg 위치에 이미지 이름을 지정하십시오. 그런 다음 Pub get을 클릭하면 콘솔 부분에서 일부 작업이 수행됩니다. main.dart 파일에서 종속성 가져오기를 클릭합니다. 따라서 yaml 파일을 코드에 통합할 수 있습니다.

코드 부분에 와서 다음과 같이 코드를 복사하여 붙여넣습니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,

다음에는 코드에 이미지 링크를 제공해야 합니다.

 backgroundImage: AssetImage('images/bharadwaj2.jpeg'),
              ),

bharadwaj2.jpeg 대신 imagename.jpeg/png를 지정하십시오.

이미지 아래에 이름을 지정하려면 코드를 따르고 그에 따라 변경하십시오.

Text(
                'Vishnubhotla Bharadwaj',
                style: TextStyle(
                    fontSize: 30.0,
                    fontFamily: 'Pacifico',
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),

Vishnubhotla Bharadwaj 대신 당신의 이름을 밝히십시오.

이름 아래에 지정을 작성하십시오. 최근에 플러터를 배우기 시작했습니다. 따라서 내 것은 단순히 'Flutter Enthusiastic'이며, 직접 작성할 수 있습니다.

            Text(
                'FLUTTER ENTHUSIASTIC',
                style: TextStyle(
                  fontSize: 20.0,
                  fontFamily: 'Source',
                  fontWeight: FontWeight.bold,
                  color: Colors.teal.shade100,
                  letterSpacing: 2.5,
                ),
              ),

여기에서 코드를 코딩하고 유휴 상태에 붙여넣기만 하면 됩니다.

SizedBox(
                height: 20.0,
                width: 150.0,
                child: Divider(
                  color: Colors.teal.shade100,
                ),
              ),
              Card(
                color: Colors.white,
                margin: EdgeInsets.symmetric(horizontal: 25.0, vertical: 10.0),
                child: ListTile(
                  leading: Icon(
                    Icons.phone,
                    color: Colors.teal,
                  ),

mi 카드에 전화번호와 이메일 아이디를 줄까 생각했다. 따라서 연락이 더 쉬울 것입니다. 다음은 전화번호 텍스트 필드의 코드입니다.

title: Text(
                    '+91 12345',
                    style: TextStyle(
                      fontFamily: 'Source',
                      fontSize: 20.0,
                      color: Colors.teal.shade900,
                    ),
                  ),
                ),
              ),

+91 자리에 국가 코드를 입력하고 12345 자리에 자신의 전화번호를 입력하세요.

다시 우리는 귀하의 이메일 ID를 제공하기 위해 카드 레이아웃을 사용해야 합니다. 따라서 여기에서 코드를 복사하여 유휴 상태에 붙여넣기만 하면 됩니다.

  Card(
                color: Colors.white,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.email,
                    color: Colors.teal,
                  ),

이제 이메일 ID를 제공할 시간입니다.

title: Text(
                    'emailid',
                    style: TextStyle(
                      fontSize: 17.0,
                      fontFamily: 'Source',
                      color: Colors.teal.shade900,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

emailid 자리에 개인 메일을 주세요.

이제 코드를 컴파일하면 마법을 볼 수 있습니다. 내 앱은 다음과 같이 잠깁니다.



댓글 섹션에서 mi-card 앱 이미지를 공유하세요. 그들을 만나기를 기다리고 있습니다.