Flutter에서 Constructor 클래스를 사용하여 여러 문자열을 추가하는 방법

Maruf Hassan |

두 개의 위젯을 만들고 main.dart에서 호출했습니다. 클래스 AntiRaggingCell위젯이 HomePage이름, 레이블, 부서, 전화 번호, 연락처 및 이메일과 같은 다양한 문자열의 세부 사항을 가져 오기를 원합니다 . 이제 내 코드가하는 일은 AntiRaggingDetailChip코드가 지저분해질 수 있도록 모든 세부 사항을 입력해야한다는 것입니다 .

내 코드,

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

final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Squad',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Squad'),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                AntiRaggingCell(),
                AntiRaggingCell(),
                AntiRaggingCell(),
                AntiRaggingCell(),
                AntiRaggingCell(),
              ],
            );
          },
          shrinkWrap: true,
          itemCount: 1,
          physics: ClampingScrollPhysics(),
        ),
      ),
      );
  }
}

class AntiRaggingCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              border: Border.all(color: Colors.black),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Wrap(
                      alignment: WrapAlignment.spaceEvenly,
                      spacing: 8.0,
                      children: <Widget>[
                        AntiRaggingDetailChip(Icons.person, 'Maruf Hassan'),
                        AntiRaggingDetailChip(Icons.label, 'Chairman'),
                        AntiRaggingDetailChip(Icons.mail, '[email protected]'),
                        AntiRaggingDetailChip(Icons.phone, '1234567890'),
                        Center(
                          child: AntiRaggingDetailChip(Icons.account_balance,
                              'Computer Science & Engineering'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class AntiRaggingDetailChip extends StatelessWidget {
  final IconData iconData;
  final String label;

  AntiRaggingDetailChip(this.iconData, this.label);

  @override
  Widget build(BuildContext context) {
    return RawChip(
      label: Text(label),
      labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
      backgroundColor: chipBackgroundColor,
      avatar: Icon(iconData),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
      ),
    );
  }
}

이 코드가 다음과 같이 입력되기를 바랍니다.

body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                AntiRaggingCell('Aman Khan','Member','[email protected]','123545894', 'MTECH'),
                AntiRaggingCell('Wasim Khan','President','[email protected]','123545894'),
                AntiRaggingCell('Afzal Khan','Member','[email protected]','123545894'),
                AntiRaggingCell('Arman Khan','Member','[email protected]','123545894'),
                AntiRaggingCell('Kalam Khan','Member','[email protected]','123545894'),
              ],
            );
          },
Maruf Hassan |

답을 찾았습니다. 생성자를 선언하고 호출하기 만하면됩니다.

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

final Color antiRaggingCellBorderColor = Color(0xFFE6E6E6);
final Color chipBackgroundColor = Color(0xFFF6F6F6);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Squad',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Anti-Ragging Squad'),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                AntiRaggingCell(name: 'Maruf Hassan', position: 'Chairman',email: '[email protected]',phone: '012354695425', dept: 'Mathematics & Statistics',),
                AntiRaggingCell(),
              ],
            );
          },
          shrinkWrap: true,
          itemCount: 1,
          physics: ClampingScrollPhysics(),
        ),
      ),
      );
  }
}

class AntiRaggingCell extends StatelessWidget {

  final String name;
  final String position;
  final String email;
  final String phone;
  final String dept;

  AntiRaggingCell({this.name, this.position, this.email, this.phone, this.dept});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(10.0),
              ),
              border: Border.all(color: Colors.black),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Center(
                    child: Wrap(
                      alignment: WrapAlignment.spaceEvenly,
                      spacing: 8.0,
                      children: <Widget>[
                        AntiRaggingDetailChip(Icons.person, name),
                        AntiRaggingDetailChip(Icons.label, position),
                        AntiRaggingDetailChip(Icons.mail, email),
                        AntiRaggingDetailChip(Icons.phone, phone),
                        Center(child: AntiRaggingDetailChip(Icons.account_balance, dept),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class AntiRaggingDetailChip extends StatelessWidget {
  final IconData iconData;
  final String label;

  AntiRaggingDetailChip(this.iconData, this.label);

  @override
  Widget build(BuildContext context) {
    return RawChip(
      label: Text(label),
      labelStyle: TextStyle(color: Colors.black, fontSize: 14.0),
      backgroundColor: chipBackgroundColor,
      avatar: Icon(iconData),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
      ),
    );
  }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

bash를 사용하여 파일에 여러 줄을 추가하는 방법 (문자열 앞에 "-")

분류에서Dev

vba를 사용하여 Excel 시트의 셀에 여러 문자열 값을 추가하는 방법

분류에서Dev

클래스 내에서 다른 여러 사용자 입력을 사용하여 사전에 데이터를 추가하는 방법은 무엇입니까?

분류에서Dev

Flutter에서 번역 문자열을 사용하고 여러 언어를 사용하는 방법

분류에서Dev

sed를 사용하여 줄 앞뒤에 문자열을 추가하는 방법

분류에서Dev

`each`를 사용하여 여러 문자열에 메서드를 추가하는 방법

분류에서Dev

클래식 ASP에서 인덱스를 사용하여 배열 문자열 값을 얻는 방법

분류에서Dev

Office JS를 사용하여 Excel 추가-Excel 텍스트 상자에 html 문자열을 추가하는 방법

분류에서Dev

boost :: spirit을 사용하여 문자열에서 여러 구조를 추출하는 방법

분류에서Dev

Python을 사용하여 문자열 (여러 구분 기호 포함)에서 경로를 추출하는 방법

분류에서Dev

AWK를 사용하여 각 줄에 특수 문자가있는 문자열을 추가하는 방법

분류에서Dev

여러 패널에서 클래스를 사용하는 방법

분류에서Dev

여러 스레드에서 문자열을 사용하는 방법

분류에서Dev

Regex를 사용하여 문자열에서 값을 추출하는 방법

분류에서Dev

R에서 tidyr를 사용하여 문자열 열을 여러 다른 열로 분리하는 방법

분류에서Dev

xpath를 사용하여 동일한 클래스 이름을 가진 여러 div에서 링크를 추출하는 방법

분류에서Dev

UnitTest를 사용하여 IList C #에 여러 항목을 추가하는 방법

분류에서Dev

awk를 사용하여 패턴 뒤에 여러 줄을 추가하는 방법

분류에서Dev

iconElementRight를 사용하여 AppBar에 여러 버튼을 추가하는 방법

분류에서Dev

레일을 사용하여 구분자에 클래스를 추가하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트를 사용하여 문자열을 텍스트 영역에 추가하는 방법

분류에서Dev

'functools.partial ()'을 사용하여 클래스에 메서드를 동적으로 추가하는 방법

분류에서Dev

데이터 테이블을 사용하여 sDom에서 "ID"및 "클래스"를 추가하는 방법

분류에서Dev

Javascript를 사용하여 부모의 자식 요소에 클래스를 추가하는 방법

분류에서Dev

jQuery를 사용하여 각 집합의 첫 번째 자식 요소에 클래스를 추가하는 방법

분류에서Dev

클로저 컴파일러를 사용하여 제네릭 유형을 확장하는 클래스에 주석을 추가하는 방법

분류에서Dev

클로저 컴파일러를 사용하여 제네릭 유형을 확장하는 클래스에 주석을 추가하는 방법

분류에서Dev

@if 문을 사용하여 요소에 여러 클래스 추가

분류에서Dev

Java에서 스캐너 클래스 또는 기타를 사용하여 문자열 배열을 읽고 사용하는 방법

Related 관련 기사

  1. 1

    bash를 사용하여 파일에 여러 줄을 추가하는 방법 (문자열 앞에 "-")

  2. 2

    vba를 사용하여 Excel 시트의 셀에 여러 문자열 값을 추가하는 방법

  3. 3

    클래스 내에서 다른 여러 사용자 입력을 사용하여 사전에 데이터를 추가하는 방법은 무엇입니까?

  4. 4

    Flutter에서 번역 문자열을 사용하고 여러 언어를 사용하는 방법

  5. 5

    sed를 사용하여 줄 앞뒤에 문자열을 추가하는 방법

  6. 6

    `each`를 사용하여 여러 문자열에 메서드를 추가하는 방법

  7. 7

    클래식 ASP에서 인덱스를 사용하여 배열 문자열 값을 얻는 방법

  8. 8

    Office JS를 사용하여 Excel 추가-Excel 텍스트 상자에 html 문자열을 추가하는 방법

  9. 9

    boost :: spirit을 사용하여 문자열에서 여러 구조를 추출하는 방법

  10. 10

    Python을 사용하여 문자열 (여러 구분 기호 포함)에서 경로를 추출하는 방법

  11. 11

    AWK를 사용하여 각 줄에 특수 문자가있는 문자열을 추가하는 방법

  12. 12

    여러 패널에서 클래스를 사용하는 방법

  13. 13

    여러 스레드에서 문자열을 사용하는 방법

  14. 14

    Regex를 사용하여 문자열에서 값을 추출하는 방법

  15. 15

    R에서 tidyr를 사용하여 문자열 열을 여러 다른 열로 분리하는 방법

  16. 16

    xpath를 사용하여 동일한 클래스 이름을 가진 여러 div에서 링크를 추출하는 방법

  17. 17

    UnitTest를 사용하여 IList C #에 여러 항목을 추가하는 방법

  18. 18

    awk를 사용하여 패턴 뒤에 여러 줄을 추가하는 방법

  19. 19

    iconElementRight를 사용하여 AppBar에 여러 버튼을 추가하는 방법

  20. 20

    레일을 사용하여 구분자에 클래스를 추가하는 방법은 무엇입니까?

  21. 21

    자바 스크립트를 사용하여 문자열을 텍스트 영역에 추가하는 방법

  22. 22

    'functools.partial ()'을 사용하여 클래스에 메서드를 동적으로 추가하는 방법

  23. 23

    데이터 테이블을 사용하여 sDom에서 "ID"및 "클래스"를 추가하는 방법

  24. 24

    Javascript를 사용하여 부모의 자식 요소에 클래스를 추가하는 방법

  25. 25

    jQuery를 사용하여 각 집합의 첫 번째 자식 요소에 클래스를 추가하는 방법

  26. 26

    클로저 컴파일러를 사용하여 제네릭 유형을 확장하는 클래스에 주석을 추가하는 방법

  27. 27

    클로저 컴파일러를 사용하여 제네릭 유형을 확장하는 클래스에 주석을 추가하는 방법

  28. 28

    @if 문을 사용하여 요소에 여러 클래스 추가

  29. 29

    Java에서 스캐너 클래스 또는 기타를 사용하여 문자열 배열을 읽고 사용하는 방법

뜨겁다태그

보관