Блог

Я попытался добавить ширину в контейнер, но это ничего не дало. По умолчанию он заполняет страницу? Не знаю, что происходит. Нужно ли мне где-то использовать MediaQuery? Я хочу, чтобы сообщение было одинакового размера как на телефоне, так и на планшете. Я не очень хорошо разбираюсь в объяснениях, поэтому я добавил фотографию, чтобы помочь.

Вот мой код:

 body: ListView(
        children: [
          Container(
            height: 132,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
            child: Card(
              margin: EdgeInsets.all(10),
              elevation: 8,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15)),
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: CircleAvatar(
                      backgroundColor: Color(0xFF192A4F),
                    ),
                    title: SizedBox(
                      height: 39,
                      child: TextButton(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            AutoSizeText(
                              'Username',
                              style: TextStyle(
                                  color: Color(0xFF192A4F),
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                        style: TextButton.styleFrom(
                            padding: EdgeInsets.zero,
                            minimumSize: Size(50, 30),
                            alignment: Alignment.centerLeft),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => SeventhRoute(),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  Divider(
                    height: 10,
                    color: Colors.black26,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Icon(Icons.comment_outlined,
                              color: Colors.black),
                          SizedBox(width: 8.0),
                          Text(
                            'Comment',
                            style: TextStyle(color: Colors.black),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Icon(Icons.bookmark_outline, color: Colors.black,),
                          SizedBox(width: 8.0),
                          Text('Bookmark', style: TextStyle(color: Colors.black),),
                        ],
                      ),
                    ],
                  ),
                      SizedBox(
                        height: 12.0,
                      )
                    ],
                  ),
              ),
            ),
        ],
      ),
 

 double width = MediaQuery.of(context).size.width;
 

вы можете получить ширину экрана отсюда. Затем добавьте логику

Например, если ширина экрана правого телефона составляет 500, а левого-1000, то вы можете установить

• если ширина экрана равна ,

  установите ширину контейнера в качестве ширины экрана

• в противном
  случае установите ширину контейнера равной 500.

—Дополнительно—

Вы можете настроить ориентацию экрана следующим образом

 var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait
 

Причина, по которой указание ширины игнорируется, заключается в том, что вы не указали, что должно произойти с картой меньшего размера. Структура не знает, должна ли она быть выровнена влево, по центру, вправо и т. Д. Чтобы исправить это, вы можете обернуть свою карту, контейнер или даже весь список в виджет по центру (или выровнять).

Основываясь на ваших изображениях, я вижу, что меняется только ширина, высота постоянна, поэтому я бы предложил в вашем контейнере указать ширину: MediaQuery.of(контекст).size.width;

И, конечно, немного подкладки к этому контейнеру.

Похоже, вы хотите, чтобы этот виджет имел как можно большую ширину, но не более 500 пикселей в ширину. Тривиальный:

 ConstrainedBox(
  child: YourChild(...),
  constraints: BoxConstraints(maxWidth: 500),
),