Breaking layouts i rækker og kolonner i flutter

Hvis du har læst om Flutter selv i 5 minutter, skal du have snublet over Widgets. Og det mest populære faktum ”I Flutter er næsten alt en widget”.

Ja, alt.

Jeg definerer Widgets som de komponenter eller blokke, der definerer brugergrænsefladen. AppBar er en widget, teksten på den er en widget, den stil, du anvender på teksten, er en widget, selv tilpasningen af ​​teksten kan kaldes en widget. I Flutter er alt, hvad der er en visning eller som bidrager til en egenskab for visningen, en widget.

Jeg kan fortsætte og tænke på widgets, men for at forenkle, her er en anbefalet liste over widgets, du skal vide for at opbygge en applikation i Flutter. For hurtig henvisning se nedenfor.

Fokus på rækker og kolonner

I Flutter kan du opdele næsten 90% af layoutdesignene i rækker og kolonner. Lejlighedsvis bliver du nødt til at bruge andre widgets som Stack, Grid osv., Men fra basisniveauet kræver du rækker og kolonner i en eller flere UI-blokke.

Så rækker og kolonner er ...

Når der er elementer placeret side om side eller vandret venstre / højre for et andet element, har du brug for rækker.

Når der er elementer placeret efter hinanden eller lodret top / bund til et andet element, skal du have kolonner.

Temmelig grundlæggende, ikke?

Med henblik på denne artikel skal du også vide følgende:
Beholdere: Hvis du kommer fra en webudviklingsbaggrund eller har nogen grundlæggende kendskab til HTML, lyder containere ganske velkendte for divs.
Bunke: Hvis der er visninger, der overlapper andre visninger, skal du bruge Stakke.

Lad os bygge noget brugergrænseflade

Tid til at dykke ned i koden og opbygge et par temmelig populære layoutkomponenter og se, hvordan rækker og kolonner passer ind her. Til det første design kopierer vi listeobjektet WhatsApp Chats-skærm. Noget svarer til nedenstående billede.

Layoutfordeling nr. 1

Så hvor mange elementer eller synspunkter ser vi? Profilbillede. Brugernavn. Brugers seneste meddelelse. Tidspunkt for den sidste meddelelse. Og antal ulæste beskeder.

Lad os pakke alt dette inde i en beholder og har tre børnesektioner: venstre sektion, midterste sektion og højre sektion, den ene efter den anden vandret.

leftSection indeholder profilbilledet.
middleSection vil have lastMessage under brugernavn.
højre afsnit har ulæsteMeddelelseskonto under tidsstemplet.

Okay. Var det svært?
Måske i begyndelsen, men når du først får fat i rækker og søjler, kan du naturligvis fordele layouts i dit hoved.

Tid til kode

I modsætning til de fleste andre tutorials på begynderniveau vil jeg altid prøve at opdele min kode i forskellige klasser og widgets. Det gør koden superlæselig.

main.dart

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

klasse MyApp udvider StatelessWidget {
  // Denne widget er roden til din applikation.
  @override
  Widget build (BuildContext kontekst) {
    returner MaterialApp (
      hjem: nyt ChatItemScreen (), // ringer til chat_screen_item.dart
    );
  }
}

Begyndertips: Glem ikke at importere de klasser, du bruger. Så for eksempel importerer main.dart chat_screen_item.dart, som har vores ChatItemScreen-klasse.

chat_item_screen.dart

klasse ChatItemScreen udvider StatelessWidget {
  @override
  Widget build (BuildContext kontekst) {
    returner nyt stillads (
      appBar: ny AppBar (
        titel: ny tekst ("Chatartikel"),
        baggrund Farve: Farver.lysGrøn,
      ),
      body: nyt ChatItem (), // kalder chat_item.dart
    );
  }
}

Det var bare for at komme i gang, så du ikke snubler over dine grundlæggende starttrin. Nu går vi videre til hovedkoden. Vores ChatItem-klasse returnerer en Container-widget, der har et Row-barn. Dette rækkebarn får tre nye børn tilbageSektioner, mellemafsnit og højreSektions widgets, som vi snart skal oprette.

chat_item.dart

klasse ChatItem udvider StatelessWidget {

  sidste venstreSektion = ny beholder ();
  sidste midtsektion = ny beholder ();
  sidste retSektion = ny beholder ();

  @override
  Widget build (BuildContext kontekst) {
    returner nyt stillads (
    body: ny beholder (
      barn: ny række (
        børn:  [
          leftSection,
          middleSection,
          rightSection
        ],
      ),
    ),
  );

  }

}

Venstre sektion

I det venstre afsnit har vi brug for en CircleAvatar, og vi har også en dejlig lille widget til det.

sidste venstreSektion = ny beholder (
  barn: nye CircleAvatar (
    backgroundImage: nyt NetworkImage (url),
    baggrund Farve: Farver.lysGrøn,
    radius: 24,0,
  ),
);

Mellemafsnit

Nu inde i middleSection Container opretter vi en kolonne med to tekst widgets, der vil indeholde brugernavnet og lastMessage indholdet.

sidste midtsektion = ny beholder (
  barn: ny kolonne (
    børn:  [
      ny tekst ("Navn"),
      ny tekst ("Hej whatsup?"),
    ],
  ),
);

Det gør arbejdet med at placere widgets efter hinanden, men ser virkelig grim ud. Tid til at tilføje noget forskønning.

sidste mellemdel = nyt Udvidet (
  barn: ny beholder (
    polstring: nye EdgeInsets.only (venstre: 8.0),
    barn: ny kolonne (
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      børn:  [
        ny tekst ("Navn",
          stil: ny TextStyle (
              farve: Farver.svart,
              fontWeight: FontWeight.w600,
              fontSize: 16,0,
          ),),
        ny tekst ("Hej whatsp?", stil:
          ny TextStyle (farve: Colors.grey),),
      ],
    ),
  ),
);
  • Udvidet: Da dette afsnit ønsker al den ledige plads, indpakker vi hele containeren i denne udvidede widget. Uden dette vil layoutet se sådan ud -
  • Polstring: Mere plads til at trække vejret, woah.
  • TextStyle: Giver styling til teksten, som farver, fontSize osv. Så meget som CSS, forbandet.
  • Nu kan jeg forklare crossAxisAlignment og mainAxisAlignment, men jeg kan ikke forklare det bedre end denne video. Så jeg vil foreslå dig at lære af de bedste. (Kontroller fra 2:00 til 7:30 for bare at få en hurtig henvisning til det emne, vi er ved)

Højre sektion

Vi er næsten færdige. Bare brug for at opbygge en anden kolonne med to widgets. Denne gang er børn widgets en Textwidget til tidsstempel og en anden lille CircleAvatar til tællingen.

endelig retSektion = ny beholder (
  barn: ny kolonne (
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    børn:  [
      ny tekst ("9:50",
          stil: ny TextStyle (
            farve: Colors.lightGreen,
          fontSize: 12.0),),
      nye CircleAvatar (
        baggrund Farve: Farver.lysGrøn,
        radius: 10,0,
        barn: ny tekst ("2",
        stil: ny TextStyle (farve: farver.hvide,
        fontSize: 12.0),),
      )
    ],
  ),
);

Kør nu denne smukke ting. Og det er klar.

Skal vi fordele et andet layout bare for at sikre dig, at du får fat på det?

Layoutfordeling # 2

Zomatosamlingskort

Så vi har dette enkle kortlayout, der har en kolonne med et par tekst widgets, der overlapper et baggrundsbillede. Hmm .. sagde du overlapning? Så betyder det, at vi bruger Stacks her?

JA, du får det.

Så i stedet for venstre, midterste eller højre sektion, lad os opdele dette layout i backgroundImage og onTopContent.

@override
Widget build (BuildContext kontekst) {

  returner ny beholder (
    polstring: nye EdgeInsets.all (8.0),
    højde: 250,0,
    barn: ny stak (
      børn:  [
        baggrundsbillede,
        onTopContent
      ],
    ),
  );
}

Baggrundsbillede

Nu vil baggrundsbillede bare have en beholder med et baggrundsbillede og et farvefilter for at gøre baggrunden mørkere.

endelig baggrundImage = ny beholder (
    dekoration: ny BoxDecoration (
      billede: ny DecorationImage (
        colorFilter: ny ColorFilter.mode (
            Colors.black.withOpacity (0,6),
            BlendMode.luminosity),
        billede: nyt NetworkImage (url),
        pasform: BoxFit.cover,
      ),
    ),
);

Til topindhold

Hvad synes du? Rækker eller kolonner?

Du har det. Coluuuumns.

final onTopContent = ny beholder (
  højde: 80,0,
  barn: ny kolonne (mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.space Selv om,
    crossAxisAlignment: CrossAxisAlignment.start,
    børn:  [
      ny tekst ("Trend i denne uge",
      stil: bigHeaderTextStyle),
      ny tekst ("De mest populære restauranter i byen denne uge",
        stil: descTextStyle),
      ny beholder (
        højde: 2,0,
        bredde: 150,0,
        farve: Colors.redAccent,
      ),
      ny tekst ("30 STEDER",
        stil: footerTextStyle),
      // ny beholder ()
    ],
  ),
);

Bliv ikke overrasket over de stilarter, jeg har brugt. Dette er ikke Flutter-standarder, jeg ved, at du har fejl. Alle stilarter til zomatokort er defineret her.

Du kan endda finde hele GitHub-arkivet til disse layout her.

I fremtiden vil jeg udforske mere komplekse layout, som du kan bryde til rodniveau. Selvfølgelig har du brug for flere widgets til mere komplekse layout, men rækker og kolonner vil altid have en rolle i det et eller andet sted, så det er vigtigt, at du får dette i hovedet.

Læs mine andre artikler om Flutter

Flutter er frisk, og jeg opdager i øjeblikket det selv. Hvis du finder noget galt med min kode eller tilgang, skal du nævne det i kommentarerne, jeg vil meget gerne forbedre det.
Hvis du lærte endda en ting eller to, skal du klappe dine hænder så mange gange du kan for at vise din støtte!
Hej verden, jeg er Pooja Bhaumik. En kreativ udvikler og en logisk designer. Du kan finde mig på Linkedin eller forfølge mig på GitHub eller følge mig på Twitter? Hvis det er for socialt for dig, skal du bare sende en mail til pbhaumik26@gmail.com, hvis du vil tale tech med mig.