CODEWITHSUNDEEP
flutterflutter-layout
Ravinder Kumar
Ravinder Kumar

Reputation: 7990

How to create Tree View Layout in Flutter?

I am making a screen when I need to show design like Screen Below, with tree views and connectors. It will be a great help if someone can suggest me how to create a design like this, conceptually. I have tried a Gridview and tree_view so far.

GridView.count(
  // Create a grid with 2 columns. If you change the scrollDirection to
  // horizontal, this produces 2 rows.
  crossAxisCount: 2,
  // Generate 100 widgets that display their index in the List.
  children: List.generate(100, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline,
      ),
    );
  }),
);

enter image description here

Upvotes: 3

Views: 6275

Answers (2)

Ravinder Kumar
Ravinder Kumar

Reputation: 7990

graphite is somewhat similar to the design,

DirectGraph(
        list: list,
        cellWidth: 136.0,
        cellPadding: 24.0,
        orientation: MatrixOrientation.Vertical,
      )

Upvotes: 1

Javier Herrera Lemus
Javier Herrera Lemus

Reputation: 21

Use the public flutter package called GraphView

Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.

The library is designed to support different graph layouts and currently works excellent with small graphs.

Upvotes: 1

Related Questions