Layout di rottura in Righe e Colonne in Flutter

Se hai letto Flutter anche per 5 minuti, devi esserti imbattuto in Widget. E il fatto più popolare "In Flutter, quasi tutto è un widget".

Si tutto.

Definisco i widget come componenti o blocchi che definiscono l'interfaccia utente. L'AppBar è un widget, il testo su di esso è un widget, lo stile che si applica al testo è un widget, anche l'allineamento del testo può essere chiamato come widget. In Flutter, tutto ciò che è una vista o contribuisce a una proprietà della vista è un widget.

Posso andare avanti e avanti sui widget, ma per semplificare, ecco un elenco consigliato di widget che devi sapere per creare un'applicazione in Flutter. Per un riferimento rapido, vedere di seguito.

Concentrandosi su righe e colonne

In Flutter, puoi dividere quasi il 90% dei progetti di layout in Righe e Colonne. Occasionalmente, dovrai utilizzare altri widget come Stack, Grid ecc., Ma dal livello base, avrai bisogno di righe e colonne in un blocco dell'interfaccia utente o nell'altro.

Quindi righe e colonne sono ...

Quando sono presenti elementi affiancati o orizzontalmente a sinistra / a destra di un altro elemento, sono necessarie le righe.

Quando ci sono elementi disposti uno dopo l'altro, o verticalmente in alto / in basso su un altro elemento, sono necessarie le colonne.

Abbastanza semplice, vero?

Ai fini di questo articolo, è necessario conoscere anche quanto segue:
Contenitori: se provieni da uno sfondo di sviluppo web o hai una conoscenza base dell'HTML, i contenitori suoneranno abbastanza familiari ai div.
Pile: se vi sono viste sovrapposte ad altre viste, utilizzare Pile.

Costruiamo un po 'di interfaccia utente

È ora di immergersi nel codice e creare un paio di componenti di layout piuttosto popolari e vedere come righe e colonne si adattano qui. Per il primo progetto, repliceremo la voce dell'elenco della schermata delle chat di WhatsApp. Qualcosa di simile all'immagine qui sotto.

Disposizione layout n. 1

Quindi quanti elementi o viste vediamo? Immagine del profilo. Nome utente. Ultimo messaggio dell'utente. Ora dell'ultimo messaggio. E numero di messaggi non letti.

Consente di avvolgere tutto questo in un contenitore e di avere tre sezioni secondarie: leftSection, middleSection e rightSection, una dopo l'altra in orizzontale.

leftSection conterrà l'immagine del profilo.
middleSection avrà lastMessage sotto userName.
rightSection avrà unreadMessageCount sotto timeStamp.

Va bene. È stato difficile?
Forse all'inizio, ma una volta appeso a righe e colonne, puoi naturalmente scomporre i layout nella tua testa.

Tempo di codificare

A differenza della maggior parte degli altri tutorial di livello principiante, cercherò sempre di suddividere il mio codice in diverse classi e widget. Rende il codice super leggibile.

main.dart

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

la classe MyApp estende StatelessWidget {
  // Questo widget è la radice della tua applicazione.
  @oltrepassare
  Widget build (contesto BuildContext) {
    return MaterialApp (
      home: nuovo ChatItemScreen (), // chiama chat_screen_item.dart
    );
  }
}

Suggerimento per principianti: non dimenticare di importare le classi che utilizzerai. Ad esempio, main.dart importerà chat_screen_item.dart che ha la nostra classe ChatItemScreen.

chat_item_screen.dart

la classe ChatItemScreen estende StatelessWidget {
  @oltrepassare
  Widget build (contesto BuildContext) {
    restituire il nuovo Scaffold (
      AppBar: nuova AppBar (
        titolo: nuovo testo ("Voce chat"),
        backgroundColor: Colors.lightGreen,
      ),
      body: new ChatItem (), // chiamando chat_item.dart
    );
  }
}

Questo è stato solo per iniziare, in modo da non inciampare nei tuoi passaggi iniziali di base. Passiamo ora al codice principale. La nostra classe ChatItem restituirà un widget Contenitore che ha un figlio Row. Questo figlio Row avrà tre nuovi widget leftSection, middleSection e rightSection che costruiremo presto.

chat_item.dart

la classe ChatItem estende StatelessWidget {

  final leftSection = new Container ();
  final middleSection = new Container ();
  final rightSection = new Container ();

  @oltrepassare
  Widget build (contesto BuildContext) {
    restituire il nuovo Scaffold (
    body: new Container (
      figlio: nuova riga (
        figli:  [
          leftSection,
          middleSection,
          rightSection
        ],
      ),
    ),
  );

  }

}

Sezione sinistra

Nella sezione di sinistra, abbiamo bisogno di un CircleAvatar e abbiamo anche un bel widget per quello.

final leftSection = new Container (
  figlio: nuovo CircleAvatar (
    backgroundImage: new NetworkImage (url),
    backgroundColor: Colors.lightGreen,
    raggio: 24,0,
  ),
);

Sezione centrale

Ora all'interno del contenitore middleSection, creiamo una colonna di due widget di testo che conterrà il contenuto userName e lastMessage.

final middleSection = new Container (
  figlio: nuova colonna (
    figli:  [
      nuovo testo ("Nome"),
      nuovo testo ("Ciao whatsup?"),
    ],
  ),
);

Fa il lavoro di posizionare i widget uno dopo l'altro ma sembra davvero brutto. È ora di aggiungere un po 'di abbellimento.

final middleSection = new Expanded (
  child: new Container (
    padding: new EdgeInsets.only (left: 8.0),
    figlio: nuova colonna (
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      figli:  [
        nuovo testo ("Nome",
          stile: nuovo TextStyle (
              colore: Colori nero,
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
          ),),
        nuovo testo ("Ciao whatsp?", stile:
          nuovo TextStyle (color: Colors.grey),),
      ],
    ),
  ),
);
  • Espanso: poiché questa sezione richiede tutto lo spazio libero disponibile, avvolgiamo l'intero contenitore in questo widget Espanso. Senza questo, il layout sarà simile a questo:
  • Imbottitura: più spazio per respirare, guai.
  • TextStyle: dà stile al testo, come colori, fontSize, ecc. Proprio come CSS, accidenti.
  • Ora posso spiegare crossAxisAlignment e mainAxisAlignment, ma non posso spiegarlo meglio di questo video. Quindi ti consiglio di imparare dai migliori. (Controlla dalle 2:00 alle 7:30 per avere un rapido riferimento all'argomento in cui ci troviamo)

Sezione giusta

Abbiamo quasi finito. Devo solo creare un'altra colonna di due widget. Questa volta, i widget per bambini saranno un Textwidget per il timestamp e un altro piccolo CircleAvatar per il conteggio.

final rightSection = new Container (
  figlio: nuova colonna (
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    figli:  [
      nuovo testo ("9:50",
          stile: nuovo TextStyle (
            colore: Colors.lightGreen,
          fontSize: 12.0),),
      nuovo CircleAvatar (
        backgroundColor: Colors.lightGreen,
        raggio: 10,0,
        figlio: nuovo testo ("2",
        stile: nuovo TextStyle (color: Colors.white,
        fontSize: 12.0),),
      )
    ],
  ),
);

Adesso corri questa cosa meravigliosa. Ed è pronto.

Analizziamo un altro layout solo per assicurarci di averne capito?

Disposizione layout n. 2

Carta delle collezioni di Zomato

Quindi abbiamo questo semplice layout di scheda che ha una colonna di alcuni widget di testo che si sovrappongono a un'immagine di sfondo. Hmm .. hai detto sovrapposizione? Questo significa che utilizziamo Stack qui?

SÌ, lo stai ottenendo.

Quindi, invece della sezione sinistra, centrale o destra, suddividiamo questo layout in backgroundImage e onTopContent.

@oltrepassare
Widget build (contesto BuildContext) {

  return new Container (
    imbottitura: new EdgeInsets.all (8.0),
    altezza: 250,0,
    child: new Stack (
      figli:  [
        immagine di sfondo,
        onTopContent
      ],
    ),
  );
}

Immagine di sfondo

Ora l'immagine di sfondo avrà solo un contenitore con un'immagine di sfondo e un filtro colore per scurire lo sfondo.

final backgroundImage = new Container (
    decorazione: nuovo BoxDecoration (
      immagine: new DecorationImage (
        colorFilter: new ColorFilter.mode (
            Colors.black.withOpacity (0,6),
            BlendMode.luminosity),
        immagine: nuovo NetworkImage (url),
        misura: BoxFit.cover,
      ),
    ),
);

In alto contenuto

Cosa ne pensi? Righe o colonne?

Avete capito bene. Coluuuumns.

final onTopContent = new Container (
  altezza: 80,0,
  figlio: nuova colonna (mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    figli:  [
      nuovo testo ("Trending this week",
      stile: bigHeaderTextStyle),
      nuovo testo ("I ristoranti più famosi in città questa settimana",
        stile: descTextStyle),
      nuovo contenitore (
        altezza: 2.0,
        larghezza: 150,0,
        color: Colors.redAccent,
      ),
      nuovo testo ("30 POSTI",
        stile: footerTextStyle),
      // new Container ()
    ],
  ),
);

Ora non essere sorpreso dagli stili che ho usato. Questi non sono valori predefiniti di Flutter, so che hai errori. Tutti gli stili per la scheda zomato sono definiti qui.

Puoi persino trovare l'intero repository GitHub per questi layout qui.

In futuro, esplorerò layout più complessi che puoi rompere al livello principale. Ovviamente, avrai bisogno di più widget per layout più complessi, ma Righe e colonne avranno sempre un ruolo in esso da qualche parte, quindi è importante che tu lo abbia in mente.

Leggi i miei altri articoli su Flutter

Flutter è fresco e lo sto scoprendo da solo. Se trovi qualcosa di sbagliato nel mio codice o approccio, menzionalo nei commenti, mi piacerebbe migliorare.
Se hai imparato anche una cosa o due, batti le mani quante più volte puoi per mostrare il tuo supporto!
Ciao mondo, sono Pooja Bhaumik. Uno sviluppatore creativo e un progettista logico. Puoi trovarmi su Linkedin o seguirmi su GitHub o seguirmi su Twitter? Se è troppo social per te, basta inviare una mail a pbhaumik26@gmail.com se desideri parlare di tecnologia con me.