Flutter：如何在嵌套堆栈和卡片小部件下添加列表项

Question

I am new to Flutter and I was having some problems when inserting a list item into the program to make the desired UI.

I have tried multiple ways but it didnt seem to make it as it always said too many positional arguments The desired UI:

https://i.stack.imgur.com/W36BB.png

And here is my current code and current UI:

Current Code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  static const showGrid = true;
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SizedBox(
          height: 360.0,
          child: Stack(
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    color: const Color.fromARGB(255, 69, 186, 58),
                    width: MediaQuery.of(context).size.width,
                    height: 200.0,
                    child: Row(
                      children: [
                        const SizedBox(height: 11.0),
                        Row(
                          children: [
                            const Icon(Icons.add_card),
                          ],
                        ),
                        const SizedBox(width: 7.0),
                        const Text(
                          'Tiếng Việt',
                          style: TextStyle(
                              color: Color.fromARGB(59, 0, 0, 0),
                              fontSize: 17.6),
                        ),
                        Row(
                          children: [const Icon(Icons.expand_more)],
                        )
                      ],
                    ),
                  ),
                ],
              ),
              Positioned(
                top: 140.0,
                left: 0.45,
                right: 0.8,
                bottom: 65.0,
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(1.0),
                        border: Border.all(
                            color: Colors.grey.withOpacity(0.5), width: 1.0),
                        color: Colors.white),
                    child: Card(
                      borderOnForeground: true,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      color: Colors.white,
                      elevation: 10,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const SizedBox(height: 2.0),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Container(
                                height: 85.0,
                                width: 85.0,
                                decoration: const BoxDecoration(
                                    color: Color.fromRGBO(200, 230, 201, 1),
                                    shape: BoxShape.circle),
                                child: const Center(
                                  child: Text(
                                    'Hình',
                                    style: TextStyle(fontSize: 20.0),
                                  ),
                                ),
                              ),
                              const SizedBox(width: 7),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    children: [
                                      const Text(
                                        'Nguyễn Văn A',
                                        style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 17.6,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      const SizedBox(
                                        width: 97.3,
                                      ),
                                      Row(
                                        children: [
                                          const Icon(Icons.more_vert,
                                              color: Colors.green),
                                        ],
                                      )
                                    ],
                                  ),
                                  SizedBox(height: 8.0),
                                  Row(
                                    children: [
                                      Text('Tài khoản: 096984030_1',
                                          style: TextStyle(
                                              color: Colors.grey,
                                              fontSize: 13)),
                                    ],
                                  ),
                                  const Divider(),
                                  SizedBox(height: 12.0),
                                  Row(
                                    children: [
                                      Text('Trường lớp:',
                                          style: TextStyle(
                                              color: Colors.grey,
                                              fontSize: 12.0)),
                                      SizedBox(width: 5.0),
                                      Text(
                                        'Hoa Baby',
                                        style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 12.6),
                                      ),
                                    ],
                                  ),
                                  SizedBox(height: 1.0),
                                  Row(
                                    children: [
                                      SizedBox(width: 66.0),
                                      SizedBox(
                                        child: Text(
                                          'Trường KidsOnline  Kindergarten 2 ',
                                          style: TextStyle(
                                              color: Colors.grey,
                                              fontSize: 12.6),
                                        ),
                                        height: 35.0,
                                        width: 130.0,
                                      ),
                                      Icon(Icons.expand_more,
                                          color: Colors.green),
                                    ],
                                  )
                                ],
                              ),
                              SizedBox(width: 14.0),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Current UI:

https://i.stack.imgur.com/1npoK.png

Answer 1

You can use SingleChildScrollView and ListView.Builder . I Made some changes in your code, you can use it.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  static const showGrid = true;
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
        children: [
          SizedBox(
            height: 360.0,
            child: Stack(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      color: const Color.fromARGB(255, 69, 186, 58),
                      width: MediaQuery.of(context).size.width,
                      height: 200.0,
                      child: Row(
                        children: [
                          const SizedBox(height: 11.0),
                          Row(
                            children: [
                              const Icon(Icons.add_card),
                            ],
                          ),
                          const SizedBox(width: 7.0),
                          const Text(
                            'Bura nere amk',
                            style: TextStyle(
                                color: Color.fromARGB(59, 0, 0, 0),
                                fontSize: 17.6),
                          ),
                          Row(
                            children: [const Icon(Icons.expand_more)],
                          )
                        ],
                      ),
                    ),
                  ],
                ),
                Positioned(
                  top: 140.0,
                  left: 0.45,
                  right: 0.8,
                  bottom: 65.0,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 20.0),
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(1.0),
                          border: Border.all(
                              color: Colors.grey.withOpacity(0.5), width: 1.0),
                          color: Colors.white),
                      child: Card(
                        borderOnForeground: true,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(0.0),
                        ),
                        color: Colors.white,
                        elevation: 10,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            const SizedBox(height: 2.0),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Container(
                                  height: 85.0,
                                  width: 85.0,
                                  decoration: const BoxDecoration(
                                      color: Color.fromRGBO(200, 230, 201, 1),
                                      shape: BoxShape.circle),
                                  child: const Center(
                                    child: Text(
                                      'burası',
                                      style: TextStyle(fontSize: 20.0),
                                    ),
                                  ),
                                ),
                                const SizedBox(width: 7),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      children: [
                                        const Text(
                                          'Nguyễn Văn A',
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 17.6,
                                              fontWeight: FontWeight.bold),
                                        ),
                                        const SizedBox(
                                          width: 97.3,
                                        ),
                                        Row(
                                          children: [
                                            const Icon(Icons.more_vert,
                                                color: Colors.green),
                                          ],
                                        )
                                      ],
                                    ),
                                    SizedBox(height: 8.0),
                                    Row(
                                      children: [
                                        Text('Tài khoản: 096984030_1',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 13)),
                                      ],
                                    ),
                                    const Divider(),
                                    SizedBox(height: 12.0),
                                    Row(
                                      children: [
                                        Text('Trường lớp:',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12.0)),
                                        SizedBox(width: 5.0),
                                        Text(
                                          'Hoa Baby',
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 12.6),
                                        ),
                                      ],
                                    ),
                                    SizedBox(height: 1.0),
                                    Row(
                                      children: [
                                        SizedBox(width: 66.0),
                                        SizedBox(
                                          child: Text(
                                            'Tbu kisim ',
                                            style: TextStyle(
                                                color: Colors.grey,
                                                fontSize: 12.6),
                                          ),
                                          height: 35.0,
                                          width: 130.0,
                                        ),
                                        Icon(Icons.expand_more,
                                            color: Colors.green),
                                      ],
                                    )
                                  ],
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // List here
          Stack(
            children: <Widget>[
              Positioned(
                child: SingleChildScrollView(
                  child: Container(
                      child: ListView.builder(
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return ListTile(
                            onTap: () {},
                            title: Text("Title"),
                            leading: Text("Leading"),
                          );
                        },
                      ),
                      color: Color.fromARGB(148, 86, 28, 141),
                      width: MediaQuery.of(context).size.width,
                      height: 310),
                ),
              ),
            ],
          ),
        ],
      )),
    );
  }
}