Как добавить несколько строк с помощью класса Constructor во Flutter - PullRequest
Новая
       6

Как добавить несколько строк с помощью класса Constructor во Flutter

1 голос
/ 13 февраля 2020

Я сделал два виджета и назвал их в 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, 'maruf@gmail.com'),
                        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','abc@gmail.com','123545894', 'MTECH'),
                AntiRaggingCell('Wasim Khan','President','abc@gmail.com','123545894'),
                AntiRaggingCell('Afzal Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Arman Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Kalam Khan','Member','abc@gmail.com','123545894'),
              ],
            );
          },

Ответы [ 3 ]

1 голос
/ 13 февраля 2020 
import 'package:flutter/material.dart';

class AntiRaggingCell extends StatelessWidget {
  final String name;
  final String position;
  final String email;
  final String phone;
  final String org;

  AntiRaggingCell(this.name, this.position, this.email, this.phone, {this.org});
  @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, 'maruf@gmail.com'),
                        AntiRaggingDetailChip(Icons.phone, '1234567890'),
                        Center(
                          child: AntiRaggingDetailChip(Icons.account_balance,
                              'Computer Science & Engineering'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Назовите этот класс так: 

children: <Widget>[
                AntiRaggingCell('Aman Khan','Member','abc@gmail.com','123545894', org:'MTECH'),
                AntiRaggingCell('Wasim Khan','President','abc@gmail.com','123545894'),
                AntiRaggingCell('Afzal Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Arman Khan','Member','abc@gmail.com','123545894'),
                AntiRaggingCell('Kalam Khan','Member','abc@gmail.com','123545894'),
              ],
            );

Если вам нужно больше таких полей, просто поместите их в скобку angular.

1 голос
/ 13 февраля 2020

просто добавьте конструктор с нужными параметрами.

Вот пример 

     final name;
  final email;

  const MyApp({Key key, this.name, this.email}) : super(key: key);
0 голосов
/ 13 февраля 2020

Я нашел ответ. Просто нужно объявить конструктор и вызвать его. 

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: 'maruf@gmail.com',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),
        ),
      ),
    );
  }
}
...