Month: July 2020

  • Navigation in SwiftUI with multiple views

    Navigation in SwiftUI with multiple views

    Download Complete Login app with Laravel API

    I was trying to build a simple app in iOS + SwiftUI with multiple views that uses NavigationView and NavigationLink.

    This app is very simple and uses a model to navigate between destinations. Enum ViewType tracks all the destinations. If you want to have another view, View4, just add a new case in ViewType enum.

    struct Menu: Identifiable {
        var id = UUID()
        var name: String
        var image: String
        var destination: ViewType
    }
    
    enum ViewType {
        case home
        case view1
        case view2
    }

    Our all views must have a property with menu type

    struct HomeView: View {
        var menu: Menu
        
        var body: some View {
            Text("Home View")
        }
    }

    Our MasterView which is the main view in root ContentView. Also, we added HomeView as our default view here.

    var body: some View {
            NavigationView {
                MasterView()
                    .navigationBarTitle(
                        Text("Navigation Demo")
                    )
                HomeView(menu: Menu(name:"Home",      image:"image",  destination:    .home))
            }.navigationViewStyle(DefaultNavigationViewStyle())
      }

    In our MasterView we have an array of Menu with title and destination view case, which populated in a list view.

    let  view1 =  Menu(name:"Home",      image:"image",  destination:    .home)
    let  view2 =  Menu(name:"View 1",          image:"image",  destination:    .view1)
    let  view3 =  Menu(name:"View 3",       image:"image",  destination:    .view2)
    
    var body: some View {
            let menus: [Menu] = [view1, view2, view3]
    
            return List {
                ForEach(menus) { menu in
                    self.destinationView(menu: menu)
                }
            }
    }

    function destinationView return a NavigationLink based on what item you choose on the list and take the user to the expected view.

    func destinationView(menu: Menu) -> some View {
            
            switch menu.destination {
                case .view1:
                    return NavigationLink(
                        destination: AnyView(View1(menu: menu))
                    )
                    {
                        Text("\(menu.name)")
                    }
                case .view2:
                       return NavigationLink(
                           destination: AnyView(View2(menu: menu))
                       )
                       {
                           Text("\(menu.name)")
                       }
                default:
                   return NavigationLink(
                       destination: AnyView(HomeView(menu: menu))
                   )
                   {
                       Text("\(menu.name)")
                   }
            }
            
        }

    Download the source code

    Spread the love
  • MySQL and Maria DB connection with Dart language

    MySQL and Maria DB connection with Dart language

    MySQL and Maria DB connection with Dart language

    Connect to MySQL or Maria DB server from Dart is very easy. We just need a couple of packages.

    Create your pubspec.yaml and add mysqli as a dependency. And run

    name: mysql
    description: A sample command-line application.
    # version: 1.0.0
    # homepage: https://www.example.com
    # author: sminrana <[email protected]>
    
    environment:
      sdk: '>=2.0.0 <3.0.0'
    
    dependencies:
      mysql1: ^0.17.1
    
    dev_dependencies:
      test: ^1.0.0
    
    pub get

    Create a file name main.dart which looks like this

    import 'dart:async';
    import 'dart:io';
    
    import 'package:mysql1/mysql1.dart';
    
    Future main() async {
      final conn = await MySqlConnection.connect(ConnectionSettings(
          host: 'localhost', port: 3306, user: 'root', password: '1234', db: 'database_name'));
    
    
      // Create a table
      await conn.query(
          'CREATE TABLE users (id int NOT NULL AUTO_INCREMENT PRIMARY KEY, name varchar(255), email varchar(255), age int)');
    
      // Insert some data
      var result = await conn.query(
          'insert into users (name, email, age) values (?, ?, ?)',
          ['Bob', '[email protected]', 25]);
      print('Inserted row id=${result.insertId}');
    
      // Query the database using a parameterized query
      var results = await conn
          .query('select name, email from users where id = ?', [result.insertId]);
      for (var row in results) {
        print('Name: ${row[0]}, email: ${row[1]}');
      }
    
      // Finally, close the connection
      await conn.close();
    }
    
    

    Here Future main async as an asynchronous dart main function which is required due to async call on line 7, here we must wait for await MySqlConnection to be finished its process.

    Similarly we must wait for the task to be finished on line 12, we create a database table on this line.

    Finally run the code by

    dart main.dart
    Spread the love