Giter Club home page Giter Club logo

flutter_task_cruv's Introduction

flutter_task_cruv

Flutter train seat booking task

the demo of the app and description are below

flutter.task.mp4

The indian railway seat booking app created using flutter framework with provider statemanagement the architecture of app contian the screens, model, statemanagement, widget and themestyle. the screens contains the screens of app, model contain the seat model, statemanagment contian the function of add, remove, search with provider. this class extends with changenotifier. widget contains common widget like cabinscreen, textformfield etc. themestyle contians colors of app.

the app contain two screens one is seat selection ui and other one is reserved seats ui the complexity of rendering seats was little complex it is 2d array so to takle this issue i create a cabin seat widget where i passed seat index type of seat and search text the then on selection screen listview.builder used to create seats now to render seats upper seat no 1, middle no 2, lower seat no 3, side up seat no 7 and side up seats etc. the cabin seat widget returned from listview.builder. the cabin seat widget required index, show seat no like 1, 2, 3, and 7 the logic is the cabin seat widget expect index, now the index of listview assign to cabin seat widget, to show seat no 1, 2, 3, and 7 .. in cabin seat no 1 index: (1 + index * 8) for seat 2 (2 + index * 8) . which output like 1,2,3 same for seat no 7 index of 7 + index * 8. it show the side low for side low the index is 8 + index * 8. now to select the seats i used logic in cabin seat widget on tap function that if the reservedseat.contain(seatmodel) then it should remove it the remove function from provider used else the add function from provider used. To search the seat by number i already pass the string searchtext. i create a function in provider where i compare the searchbar.text == seatmodel.search then it will highlight that seat the search function of provider i called in inouttextformfieldwidget onchanged where the search function accept a string which is (v) and setstate used to update the ui. the confirm selection button used to navigate to reserved screen where i watched the reservedlist with help of provider the ui contain the seats which was selected from selection ui the reserved screen shows the total reserved seats and expansion tile widget to make the ui more attractive. to hide the keyboard the focusscope function was used when to tap anywhere on selection screen it hide the keyboard also the icon i used in searchbar when it clicked the searchbar is cleared and the keyboard will hide.

thank you.

flutter_task_cruv's People

Contributors

khushnu avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.