как сделать разную раскладку для планшета во флаттере

Я думаю о создании другого макета для версии для планшета / iPad, но я новичок во Flutter, поэтому я не совсем уверен, как это сделать. Буду очень признателен, если я получу какие-либо предложения о том, как это сделать.

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

Это мои карты

   Widget build(BuildContext context) {
    return Container(
      height: 180,
      child: SingleChildScrollView(
        child: Card(
          elevation: 8.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Column(children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(10, 10, 10,0),
              child: Row(children: [
                Text(
                  title,
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                Spacer(),
                Container(
                    child: IconButton(
                  icon: Icon(Icons.favorite),
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(builder: (context)=> DetailsPage("Favorite")));
                  },
                ))
              ]),
            ),
            Divider(color: Colors.black),
            Row(children: [
              //Legend
              tileWidget(TileItem(
                  topText: "Top",
                  middleText: "Middle",
                  bottomText: "Bottom")),
              Container(
                color: Colors.red, 
                height: 60, width: 2),
                (tileItems.length < 1) ? null : tileWidget(tileItems[0]),
              Container(
                color: Colors.green, 
                height: 60, width: 2),
                (tileItems.length < 2) ? null : tileWidget(tileItems[1]),
              Container(
                color: Colors.black26, height: 60, width: 2),
              (tileItems.length < 3) ? null : tileWidget(tileItems[2])
            ]),
          ]),
        ),
      ),
    );
  }

flutter flutter-dependencies flutter-layout flutter-test flutter-animation
person aase lab    schedule 18.05.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы получить ширину экрана, используйте MediaQuery.of(context).size.width Создать виджет для любой ширины ниже 600 dp (например, телефон) и другой виджет для любой ширины выше (например, для планшета). Тогда ваш код будет выглядеть примерно так:

body: OrientationBuilder(builder: (context, orientation) {

        if (MediaQuery.of(context).size.width > 600) {
          isTablet= true;
        } else {
          isTablet= false;
        } etc...
      }

Вот полезный ресурс: https://medium.com/flutter-community/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434

person Code Poet    schedule 18.05.2020