Creating a resizeable table that resizes when dragged from corners and sides in FLUTTER

Viewed 45

Here is what i want

enter image description here

Hello, I made a Datatable with Flutter, I can add rows in my table and edit the information in them, and now I need help resizing my table INSIDE the app by dragging its corners(like in the image) and not by changing sizes in the code. I found a question like this but with an image, and I couldn't integrate that into my code correctly. Can someone help me? I'll link the question here. Creating Resizable View that resizes when pinch or drag from corners and sides in FLUTTER

And I'll put my code here.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Editable Table",
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      debugShowCheckedModeBanner: false,
      home: TablePage(),
    );
  }
}

class TablePage extends StatefulWidget{
  @override
  _TablePageState createState() => _TablePageState();
}

class _TablePageState extends State<TablePage> {
  @override
  Widget build(BuildContext context){

    //headers or columns
    List headers = [
      {"title":'Name', 'index': 1, 'key':'name'},
      {"title":'Date', 'index': 2, 'key':'date'},
      {"title":'Month', 'index': 3, 'key':'month'},
      {"title":'Status', 'index': 4, 'key':'status'},
    ];

    //row data
    List rows = [
      {"name": 'James Peter', "date":'01/08/2007',"month":'March',"status":'beginner'},
      {"name": 'James Peter', "date":'01/08/2007',"month":'March',"status":'beginner'},
      {"name": 'James Peter', "date":'01/08/2007',"month":'March',"status":'beginner'},
      {"name": 'James Peter', "date":'01/08/2007',"month":'March',"status":'beginner'},
      {"name": 'James Peter', "date":'01/08/2007',"month":'March',"status":'beginner'},
    ];

    return Scaffold(
      body: Editable(
        columns: headers,
        rows: rows,
        showCreateButton: true,
        tdStyle: TextStyle(fontSize: 20),
        showSaveIcon: false,
        borderColor: Colors.grey.shade300,
        onSubmitted: (value) { //new line
          print(value); //you can grab this data to store anywhere
        },
        onRowSaved: (value){ //added line
          print(value); //prints to console
        },
      ),
    );

  }


}

Here is my table from the code

enter image description here

0 Answers
Related