It just looks like the mobile UI on a larger screen. Let’s see what the shopping app looks like without any responsive UI: The app should be able to respect varying screen sizes and provide different UI/UX for a rich experience. Now that our shopping app is going to run on web browsers as well, we need to rethink how it will look when the UI is rendered in browsers. If you’re inclined to take matters into your own hands, you can also contribute to the library and introduce support for the web yourself. If any library is not available for the web, you can try to find an alternative to that library and refactor the code. In our example Flutter app, we’re using provider for state management, which is available for the web. To check whether a web version of a given package is available, head to pub.dev, paste the package name in the search bar and check whether it has a web label in the search result. Before we go any further, we need to make sure there is a web version available for all the packages and plugins powering the mobile app. Let’s see what other steps we need to take to make the web version of the app function seamlessly. But just because it’s running, that doesn’t mean it’ll work perfectly as it does on mobile. Then, hit the Run button.Īmazing! Now our Flutter app, which was used to target mobile, is running on the web. To run an app in the browser, select Chrome if you’re using a Mac or Linux system or Edge if you’re on Windows. Now it’s time to run the same app on the web: The above command should create the web directory at the root of the project beside the Android and iOS folders. If you want to convert a Flutter mobile app to a web app, the first step is to create a web directory: flutter create. The finished product will look like this:Ĭreating a web directory for your Flutter app We’ll target this simple app to ship to the web with the same code. Users can add and remove products from the cart. Clicking a category opens a list of available products. We’ll build an example Flutter app that shows the list of shopping categories.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |