Блог

Я новичок в flutter. Я хочу создать макет сетки сообщений во flutter. Я пробовал это с помощью GridView builder. Но это несовместимо с моим макетом. Мой макет такой .

Любой может предложить мне подходящий тип макета.

Вы можете использовать SingleChildScrollView с двумя столбцами и строкой. Дерево виджетов follwing создает желаемую сетку без каких-либо дополнительных зависимостей:

 - SingleChildScrollView
  - Row
    - Column
      - Cards...
    - Column
      - Cards...
  

Вот небольшой пример отдельного кода:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child:
              Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        MyCard(),
                        MyCard(large: true),
                        MyCard(),
                        MyCard(large: true),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        MyCard(large: true),
                        MyCard(),
                        MyCard(large: true),
                        MyCard(),
                        MyCard(),
                      ],
                    ),
                  )
                ],
              )
          ),
        )
      ),
    );
  }
}

class MyCard extends StatelessWidget {
  final bool large;

  MyCard({this.large = false});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Container(
        height: large ? 60.0 : 40.0,
        color:  large ? Colors.lightBlueAccent : Colors.deepOrangeAccent,
      ),
    );
  }
}
  

вы можете использовать этот плагин:https://pub.dev/packages/flutter_staggered_grid_view

Например:

 import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

const List<StaggeredTile> _staggeredTiles = <StaggeredTile>[
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 1),
  StaggeredTile.count(1, 2),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(1, 2),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(3, 1),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(4, 1),
];

const List<Widget> _tiles = <Widget>[
  _Example01Tile(Colors.green, Icons.widgets),
  _Example01Tile(Colors.lightBlue, Icons.wifi),
  _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  _Example01Tile(Colors.brown, Icons.map),
  _Example01Tile(Colors.deepOrange, Icons.send),
  _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
  _Example01Tile(Colors.red, Icons.bluetooth),
  _Example01Tile(Colors.pink, Icons.battery_alert),
  _Example01Tile(Colors.purple, Icons.desktop_windows),
  _Example01Tile(Colors.blue, Icons.radio),
];

class Example01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('example 01'),
        ),
        body: Padding(
            padding: const EdgeInsets.only(top: 12),
            child: StaggeredGridView.count(
              crossAxisCount: 4,
              staggeredTiles: _staggeredTiles,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              padding: const EdgeInsets.all(4),
              children: _tiles,
            )));
  }
}

class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: InkWell(
        onTap: () {},
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}
  

вы должны использовать этот пакет flutter_staggered_grid_view это видео, которое показывает, как им пользоваться https://www.youtube.com/watch?v=SrGP1BdkYpkamp;t=123s для Павана Кумара.