Home > Mobile >  reusable classes in flutter
reusable classes in flutter

Time:01-02

I have a page like the following. This page has two buttons. One of them is sending the form to the relevant place. In my case to the instructor. But, this one is not important for now. The second button is the important one. Anyway, the second one is saving the form as a draft. So, I know I need to save the data that is entered, in SQLite. Then when he/she want to edit the form again I need to pull the data from SQLite then fill the relevant places. Here is the question. When I click to edit button. The page below will show up with the content that is filled before. However, for this task, it does not make sense to code again the screen below for the edit button. So I need to reuse the page below. How can I do it? Any idea. Is there any content that could be helpful? Please attach a link, video, etc. It doesn't matter. I just want to learn how to do it. I hope I could explain the situation. If any more information is required to understand the situation feel free to ask for it.

enter image description here

CodePudding user response:

If you put your page in a widget like this

class MyPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: // your page here 
    )
  }
}

you can open it in different locations.

_onButton1Click(BuildContext context){
  // do something button 1 specific
  final route = MaterialPageRoute(builder: (context) => MyPage());
  Navigator.of(context).push(route);
}

_onButton2Click(BuildContext context){
  // do something button 2 specific
  final route = MaterialPageRoute(builder: (context) => MyPage());
  Navigator.of(context).push(route);
}

CodePudding user response:

There are many ways to achieve what you need. But basically, you need to check whether there is saved data or not? If there is saved data then show it otherwise show an empty page. Simple example:

class MyPageData {
  String firstField;
  String secondField;
  // ... fields with page info
}

class MyFormPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyForPageState();
}

class _MyForPageState extends State<MyFormPage>{
  MyPageData _savedData;
  
  @override
  void initState() {
    super.initState();
    
    _savedData = loadDataFromDb();  
  }
  
  @override
  Widget build(BuildContext context) {
    String myFirstField = "";
    String mySecondField = "";
    // other fields
    
    if (_savedData != null){
      myFirstField = _savedData.firstField;
      mySecondField = _savedData.secondField;
      // other fields
    } 
    
    // render page with fields values above
  }
}

Here MyPageData is a model of all the data on your page. So it's easier to work with. Also, this data is saved to db and restored from db in the future. MyFormPage is a stateful widget for your form page. There is a loadDataFromDb method that is used to load saved data. Then in the build method, we check whether there is saved data or not. If there is data we filled initial values for all fields on our page and use those fields as initial values for the widgets from which our page is constructed. So if there is no data saved then _savedData will be null and all widgets will have empty initial values.

  • Related