1

次のコードがありますが、ユーザー名を左 (画像の隣) に配置し、クラステキストを行の右に配置する方法がわかりません。MainAxisAlignment.spaceBetween はうまくいきません。すべての行と列でいくつかの異なる配置を試みましたが、何も機能していません。2 つのテキストの間にスペースを確保する唯一の方法は、テキストの 1 つにパディングを追加することですが、ユーザー名のサイズが異なり、クラス テキストが右揃えにならないため、これは望ましくありません。

Container(
  width: 180,
  decoration: BoxDecoration(
    color: const Color(0xffe8d9c3),
    border: Border.all(color: Colors.transparent),
    borderRadius: const BorderRadius.all(
      Radius.circular(4),
    ),
    boxShadow: const [
      BoxShadow(
        color: Colors.black,
        blurRadius: 2.0,
        spreadRadius: 0.0,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: Row(
    //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      const CircleAvatar(
        backgroundImage: NetworkImage(
          'https://www.woolha.com/media/2020/03/eevee.png',
        ),
      ),
      const SizedBox(
        width: 5,
      ),
      Column(
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              StreamBuilder<DocumentSnapshot>(
                stream: userdoc.snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<DocumentSnapshot> snapshot) {
                  return Text(
                    "${snapshot.data?["username"]}",
                    style: const TextStyle(
                      fontSize: 10,
                      color: Colors.black,
                    ),
                  );
                },
              ),
              const Text(
                "Class 8",
                style: TextStyle(
                  fontSize: 10,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          Stack(
            clipBehavior: Clip.none,
            children: const [
              SizedBox(
                width: 120,
                height: 15,
                child: LinearProgressIndicator(
                  value: 0.3,
                  backgroundColor: Color(0xff816840),
                  color: Color(0xffffc518),
                ),
              ),
              Positioned(
                right: 10,
                top: 2,
                child: Text(
                  "2918",
                  style: TextStyle(
                    fontSize: 10,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ],
  ),
)
4

2 に答える 2