Flattergrundlagen für Anfänger (Teil I)

Einführung

Hallo an alle, die Flutter kennenlernen wollen!

Ich hatte das brennende Verlangen, mein Wissen, das ich über mehrere Monate gesammelt habe, mit Ihnen zu teilen.

Vielleicht ist meine Erfahrung im Vergleich zu Guru-Programmierern sehr gering, ich werde trotzdem versuchen, etwas Nützliches für Sie zu tun.

Das Ergebnis unserer Arbeit wird eine kleine Flutter-Anwendung sein, die Daten vom JSONPlaceholder übernimmt .

Unser Plan

• Teil 1 (aktueller Artikel) - Einführung in die Entwicklung, erster Anhang, Zustandsbegriff;

  
  
  
  
  

• Teil 2 - pubspec.yaml-Datei und Verwenden von Flattern in der Befehlszeile;

  
  
  
  
  

• Teil 3 - BottomNavigationBar und Navigator;

  
  
  
  
  

• Teil 4 - MVC. Wir werden dieses spezielle Muster als eines der einfachsten verwenden;

  
  
  
  
  

• Teil 5 - http-Paket. Erstellung der Repository-Klasse, erste Anfragen, Auflistung der Beiträge;

  
  
  
  
  

• Teil 6 - Arbeiten mit Bildern, Anzeigen von Bildern in Form eines Rasters, Empfangen von Bildern aus dem Netzwerk, Hinzufügen eigener Bilder zur Anwendung;

  
  
  
  
  

• Teil 7 - Erstellen Sie Ihr eigenes Thema und fügen Sie benutzerdefinierte Schriftarten und Animationen hinzu.

  
  
  
  
  

• Teil 8 - Ein wenig über das Testen;

  
  
  
  
  

Erster Schritt - Konfigurieren und Installieren von Komponenten

Nun, fangen wir an.

Gehen Sie zur Installationsseite: Install - Flutter und laden Sie Flutter für Ihre Plattform herunter

Installieren Sie dann den Editor oder die IDE mithilfe der Anweisung Editor einrichten

Ich werde Googles Android Studio IDE verwenden.

Android Studio Flutter ( Set up an editor, ).

-

Flutter Application

( Flutter , ).

package name ( , Google Play Apple Store, , Android Application ID Apple App ID):

Finish.

-

main.dart :

import 'package:flutter/material.dart';

// main()       
//  
//   
void main() => runApp(MyApp());

//  Flutter    (,,   ..)
//  -   ,    
//   (   Android )
//      StatelessWidget 
//    
class MyApp extends StatelessWidget {

	//  build     
  @override
  Widget build(BuildContext context) {
		//  MaterialApp -   , 
  	//     
    // Material Design  .
    return MaterialApp(
    	//  
      //  ,    
      title: 'Json Placeholder App',
      //  ,     
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //   ,    
      home: HomePage(),
    );
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( , ):

pages:

home_page.dart:

:

import 'package:flutter/material.dart';

// StatefulWidget  ,  
//      
// setState(VoidCallback fn);
//   setState   
class HomePage extends StatefulWidget {
  // StatefulWidget   ,
  //    State
  @override
  _HomePageState createState() => _HomePageState();
}

//       StatefulWidget 
//     
//   _   , 
//     _HomePageState    
//    private  Java / Kotlin
class _HomePageState extends State<HomePage> {
  
  //  buil,    , 
  //    
  @override
  Widget build(BuildContext context) {
    //    Scaffold ,
    //       
    // Scaffold    AppBar, BottomNavigationBar,
    // Drawer, FloatingActionButton     
    //  ().
    return Scaffold(
      //   AppBar   "Home Page"
      appBar: AppBar(title: Text("Home page")),
      //      Scaffold
      //     Center ,
      //       
      body: Center(
        child: Text(
          "Hello, JSON Placeholder!!!",
          //       Text
          textAlign: TextAlign.center,
          // Theme.of(context)     
          //  ThemeData,     MaterialApp
          //   ThemeData   
          //    ( headline3,  )
          style: Theme.of(context).textTheme.headline3,
        )
      )
    );
  }
  
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Flutter - ,

-

, .

HomePage main :

import 'pages/home_page.dart';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

: , , :

import 'package:json_placeholder_app/pages/home_page.dart';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, pubspec.yaml (pubspec.yaml ):

, , iOS Android.

, ( , Honor 30i), Run:

!

DEBUG , :

import 'package:flutter/material.dart';

// main()       
//  
//   
void main() => runApp(MyApp());

//  Flutter    (,,   ..)
//  -   ,    
//   (   Android )
//      StatelessWidget 
//    
class MyApp extends StatelessWidget {

	//  build     
  @override
  Widget build(BuildContext context) {
    //  MaterialApp -   , 
    //     
    // Material Design  .
    return MaterialApp(
      //  
      //  ,    
      title: 'Json Placeholder App',
      //  
      debugShowCheckedModeBanner: false,
      //  ,     
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //   ,    
      home: HomePage(),
    );
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , hot reload:

Hot Reload 2-5 , .

, .

Hot Reload build . ( )

: Hot Reload , .

: Flutter , :

, .. release Flutter .

, Hot Reload.

-

, .

:

import 'package:flutter/material.dart';

// StatefulWidget  ,  
//      
// setState(VoidCallback fn);
//   setState   
class HomePage extends StatefulWidget {
  // StatefulWidget   ,
  //    State
  @override
  _HomePageState createState() => _HomePageState();
}

//       StatefulWidget
//     
//     ,  
//    _HomePageState   
//   -  private  Java / Kotlin
class _HomePageState extends State<HomePage> {

  //  ,    
  // .. _counter      
  // ,       
  // _counter    
  var _counter = 0;

  // build    , 
  //    
  @override
  Widget build(BuildContext context) {
    //    Scaffold 
    //       
    // Scaffold    AppBar, BottomNavigationBar,
    // Drawer, FloatingActionButton     
    //  ().
    return Scaffold(
      //   AppBar   "Home page"
      appBar: AppBar(title: Text("Home page")),
      //      Scaffold
      //     Center ,
      //     
      body: Center(
        //  AnimatedSwitcher,    
        //  
        child: AnimatedSwitcher(
          //  : const 
          //  ,     Duration  
          //          
          //  Duration     
          //   (,   ..)
          duration: const Duration(milliseconds: 900),
          // AnimatedSwitcher  reverse ,
          //        
          // ,     ,
          //    reverseDuration  0
          //      
          reverseDuration: const Duration(milliseconds: 0),
          child: Text(
            //   
            //     _counter 
            //   
            "$_counter",
            //   
            //     _counter
            //    setState, 
            //   AnimatedSwitcher 
            //  key     ,
            //    ,   
            key: ValueKey<int>(_counter),
            //       Text
            textAlign: TextAlign.center,
            // Theme.of(context)    
            //  ThemeData,     MaterialApp
            //   ThemeData   
            //    ( headline3,  )
            style: Theme.of(context).textTheme.headline3,
          ),
        )
      ),
      //  
      // FloatingActionButton -      
      floatingActionButton: FloatingActionButton(
        //  
        // Flutter      
        child: Icon(Icons.animation),
        onPressed: () {
          //       setState
          //   ,    
          //  . 
          //      
          setState(() {
            _counter++;
          });
        },
      ),
    );
  }

}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

! !

.

, ))

)

!