flutter - グリッド ビュー内の展開可能なタイルをフラッターします。

Question

フラッターでこの機能を実現しようとしていますが、正直なところ、その方法がわかりません。私は何週間もそれを理解しようとしてきました.flutter_staggered_grid_viewを試しました.これはこれに最も近いものでしたが、それも役に立ちませんでした. この効果を達成する方法について誰か考えがありますか?

Answer 1

Wrap ウィジェットを使用して結果を得ることができます。以下のコードを参照してください。

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Demo")),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final int _cells = 8;
  final double _containerSizeSmall = 75;
  final double _containerSizeLarge = 170;
  final double _padding = 10;
  int _clicked = 0;
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      child: Container(
        height: size.height,
        width: 240,
        child: Wrap(
          children: List.generate(
            _cells,
            (col) => Padding(
              padding: EdgeInsets.all(_padding),
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    _clicked != col + 1 ? _clicked = col + 1 : _clicked = 0;
                  });
                },
                child: Container(
                  height: _clicked == col + 1
                      ? _containerSizeLarge
                      : _containerSizeSmall,
                  width: _clicked == col + 1
                      ? _containerSizeLarge
                      : _containerSizeSmall,
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(5),
                    ),
                  ),
                  child: Center(child: Text('${col + 1}')),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}