Как спроектировать пользовательский интерфейс UI, как это, используя дартс

Question

Я знаком с Column и Row.Но сложный интерфейс в моем примере изображения, я не знаю, как начать, игнорируя китайские слова.

Answer 1

Будет ли это работать?

double _appBarHeight = 120, _imageHeight = 80, _iconTopMargin = 44, _iconLeftMargin = 12, _leftMargin = 120;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          right: 0,
          height: _appBarHeight,
          child: Container(color: Colors.blue),
        ),
        Positioned(
          left: _iconLeftMargin,
          top: _iconTopMargin,
          child: Icon(Icons.settings, color: Colors.white),
        ),
        Positioned(
          right: _iconLeftMargin,
          top: _iconTopMargin,
          child: Icon(Icons.bubble_chart, color: Colors.white),
        ),
        Positioned(
          left: _iconLeftMargin,
          top: _appBarHeight - _imageHeight / 2,
          child: ClipOval(child: Image.asset("assets/images/profile.jpg", fit: BoxFit.cover, height: _imageHeight, width: _imageHeight)),
        ),
        Positioned(
          left: _leftMargin,
          top: _appBarHeight - (_imageHeight / 2),
          child: Text("CopsOnRoad", style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 18)),
        ),
        Positioned.fill(
          left: _leftMargin,
          top: _appBarHeight + (_imageHeight / 4),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
                  Text("Gold", style: TextStyle(color: Colors.grey)),
                ],
              ),
              Column(
                children: <Widget>[
                  Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
                  Text("Silver", style: TextStyle(color: Colors.grey)),
                ],
              ),
              Column(
                children: <Widget>[
                  Text("28", style: TextStyle(fontWeight: FontWeight.bold)),
                  Text("Bronze", style: TextStyle(color: Colors.grey)),
                ],
              ),
              Container(),
            ],
          ),
        ),
        Positioned(
          left: 0,
          top: _appBarHeight + _imageHeight / 1.1,
          right: 0,
          height: 1,
          child: Container(color: Colors.grey),
        ),
        Positioned(
          top: _appBarHeight + _imageHeight * 1.1,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text("Reputation", style: TextStyle(color: Colors.grey)),
          ),
        ),
        Positioned.fill(
          left: _leftMargin,
          top: _appBarHeight + _imageHeight * 1.1,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("This", style: TextStyle(fontWeight: FontWeight.bold)),
              SizedBox(width: 10),
              Container(width: 1, color: Colors.grey.withOpacity(0.4), height: 16),
              SizedBox(width: 10),
              Text("is", style: TextStyle(fontWeight: FontWeight.bold)),
              SizedBox(width: 10),
              Container(width: 1, color: Colors.grey.withOpacity(0.4), height: 16),
              SizedBox(width: 10),
              Text("5509", style: TextStyle(fontWeight: FontWeight.bold)),
              SizedBox(width: 10),
              Spacer(),
              Icon(Icons.keyboard_arrow_right, color: Colors.grey)
            ],
          ),
        ),
      ],
    ),
  );
}

Answer 2

Вы можете использовать виджет Stack и элемент Positioned, чтобы помочь вам расположить аватара в нужном месте.

Краткое видео о позиционировании и стеке: https://www.youtube.com/watch?v=EgtPleVwxBQ