skip to Main Content

I am beginner to flutter and I am trying to add the new column, first one is default visible and the second one is visible (this is needs to be done, I have already have the code but before adding things, I am trying to set it up) by the action. So I have updated code with columns, but if I do that, all the cards are displaying as empty, not sure where I am making issue

  @override
  Widget build(BuildContext context) {
    var img = widget.data['password'];
    return Card(
      // borderOnForeground: true,
      color: const Color.fromARGB(255, 55, 55, 55),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
        side: const BorderSide(
          color: Color.fromARGB(255, 60, 60, 60),
          width: 1.0,
        ),
      ),
      child: ClipPath(
        clipper: ShapeBorderClipper(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
        child: Container(
          height: 150,
          decoration: const BoxDecoration(
            border: Border(
              left: BorderSide(
                  color: Color.fromARGB(255, 143, 175, 112), width: 10),
            ),
            color: Color.fromARGB(255, 242, 241, 241),
          ),
          padding: const EdgeInsets.all(10.0),
          // alignment: Alignment.centerLeft,
          child: Row(
            children: [
              Expanded(
                flex: 4,
                child: Container(
                    // child: Column( //!!!!!!!!!!!!!!!!!If I add this line of code to make two columns it is displaying only the above container
                    children: [
                    Row(
                  children: [
                    Expanded(
                      flex: 9,
                      child: Container(
                        child: Column(children: [
                          const SizedBox(height: 10),
                          Image.asset(
                            'assets/bank_logos/$img.png',
                            height: 60,
                          ),

                          // Icon(
                          //   Icons.card_membership,
                          //   color: Color.fromARGB(255, 183, 183, 183),
                          //   size: 50.0,
                          //   semanticLabel:
                          //       'Text to announce in accessibility modes',
                          // ),
                          const Spacer(),
                          Text(img),
                          const SizedBox(height: 10),
                        ]),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: CustomPaint(painter: DashedLinePainter()),
                    ),
                  ],
                )),
              ),
              Expanded(
                flex: 6,
                child: Container(
                  child: Column(children: [
                    const SizedBox(height: 15),
                    const Row(
                      children: [
                        Icon(
                          Icons.person,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        SizedBox(width: 5),
                        Text("Hussain"),
                        SizedBox(width: 15),
                        Icon(
                          Icons.content_copy,
                          color: Color.fromARGB(255, 168, 168, 168),
                          size: 18.0,
                        ),
                      ],
                    ),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        const Icon(
                          Icons.lock,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        const SizedBox(width: 5),
                        const Text("*****"),
                        const SizedBox(width: 15),
                        IconButton(
                          onPressed: () {
                            print("copied");
                          },
                          icon: const Icon(
                            Icons.content_copy,
                            color: Color.fromARGB(255, 168, 168, 168),
                            size: 18.0,
                          ),
                        ),
                      ],
                    ),
                  ]),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

2

Answers


  1. The problem is that you have tow nested columns:

    Expanded(
                    flex: 4,
                    child: Column(
                      // ---> Column 1
                      children: [
                        Row(
                          children: [
                            Expanded(
                              flex: 9,
                              child: Container(
                                child: Column(// ---> Column 2
                                    children: [
                                  const SizedBox(height: 10),
    

    The quickest solution would be set a fixed height for the second column.

    You can wrap a SizedBox() and add a height.

    Or, since you already have an unused container right above the Column2, you can just add a fixed height:

    Expanded(
                    flex: 4,
                    child: Column(
                      // ---> Column 1
                      children: [
                        Row(
                          children: [
                            Expanded(
                              flex: 9,
                              child: Container(
                                // ---> Add a fixed height container
                                height: 100,
                                child: Column(// ---> Column 2
                                    children: [
                                  const SizedBox(height: 10),
    
    Login or Signup to reply.
  2. Try this it will work.

    @override
      Widget build(BuildContext context) {
        var img = widget.data['password'];
        return Card(
          borderOnForeground: true,
          color: const Color.fromARGB(255, 55, 55, 55),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
            side: const BorderSide(
              color: Color.fromARGB(255, 60, 60, 60),
              width: 1.0,
            ),
          ),
          child: ClipPath(
            clipper: ShapeBorderClipper(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
            child: Container(
              height: 150,
              decoration: const BoxDecoration(
                border: Border(
                  left: BorderSide(
                      color: Color.fromARGB(255, 143, 175, 112), width: 10),
                ),
                color: Color.fromARGB(255, 242, 241, 241),
              ),
              padding: const EdgeInsets.all(10.0),
              // alignment: Alignment.centerLeft,
              child: Row(
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        Container(
                          child: Column(children: [
                            const SizedBox(height: 10),
                            const Text('Image should be here'),
                            Image.asset(
                              'assets/bank_logos/$img.png',
                              height: 60,
                            ),
                            Icon(
                              Icons.card_membership,
                              color: Color.fromARGB(255, 183, 183, 183),
                              size: 50.0,
                              semanticLabel:
                                  'Text to announce in accessibility modes',
                            ),
                            const Spacer(),
                            Text(img),
                            const SizedBox(height: 10),
                          ]),
                        ),
                        CustomPaint(painter: DashedLinePainter())
                      ],
                    ),
                  ),
                  Column(children: [
                    const SizedBox(height: 15),
                    const Row(
                      children: [
                        Icon(
                          Icons.person,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        SizedBox(width: 5),
                        Text("Hussain"),
                        SizedBox(width: 15),
                        Icon(
                          Icons.content_copy,
                          color: Color.fromARGB(255, 168, 168, 168),
                          size: 18.0,
                        ),
                      ],
                    ),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        const Icon(
                          Icons.lock,
                          color: Color.fromARGB(255, 93, 93, 93),
                          size: 22.0,
                        ),
                        const SizedBox(width: 5),
                        const Text("*****"),
                        const SizedBox(width: 15),
                        IconButton(
                          onPressed: () {
                            print("copied");
                          },
                          icon: const Icon(
                            Icons.content_copy,
                            color: Color.fromARGB(255, 168, 168, 168),
                            size: 18.0,
                          ),
                        ),
                      ],
                    ),
                  ]),
                ],
              ),
            ),
          ),
        );
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search