Flutter 自定义 UI 可滚动

Question

I want to scroll in both direction x and y. For eg: There is list of boxes at left corner and list of boxes at bottom with numbering 1 2 3 in left corner list and then at bottom 4 5 6 7 and when we scroll at left side list it should scroll down and at bottom list start moving outside the screen one by one and vice versa.

Answer 1

As per your requirement ListItems which will scroll both in x and y direction, this can achive by nesting ListView inside ListView .

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  var _container = Container(
      height: 200, // give it a fixed height constraint
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (_, i) => SizedBox(
              width: 200,
              height: 200,
              child: Container(
                child: Padding(
                  child: Container(
                    child: Center(child: Text("Item $i")),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: new BorderRadius.only(
                          bottomLeft: new Radius.circular(50.0),
                          topRight: Radius.circular(50.0)),
                      boxShadow: [
                        new BoxShadow(
                          color: Color(0Xff0f0f0f),
                          offset: new Offset(-3.0, 3.0),
                        )
                      ],
                      gradient: LinearGradient(
                        colors: [Color(0xFFcc2b5e), Color(0xFF753a88)],
                      ),
                    ),
                  ),
                  padding: EdgeInsets.all(5),
                ),
              ))));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          // parent ListView
          children: <Widget>[
            _container,
            _container,
            _container,
            _container,
            _container,
          ],
        ),
      ),
    );
  }
}