🔅 📱 FULL Flutter Beginner Course • Programming Basics / Widgets / Navigation / User Input / UI

CONTAINER • Flutter Widget of the Day #01

#Day#Day 1: Flutter Widget of the Day: Container
Bienvenue dans notre série "Flutter Widget of the Day" ! Aujourd'hui, nous allons explorer l'un des widgets les plus polyvalents et essentiels de Flutter : le Container. Le Container est un widget de base qui vous permet de personnaliser et de structurer vos interfaces utilisateur de manière flexible. Voici un aperçu de quelques propriétés importantes que vous pouvez appliquer à un Container.

1. Basic Container

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

2. Padding et Margins
Vous pouvez ajouter des espacements internes et externes à votre Container en utilisant les propriétés padding et margin.

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  color: Colors.red,
  child: Text('Hello World'),
)

3. Decoration
La propriété decoration permet d'appliquer des styles avancés comme les bordures, les ombres, et les coins arrondis.

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
) 

4. Alignment
Vous pouvez aligner le contenu du Container à l'aide de la propriété alignment.

Container(
  width: 200,
  height: 200,
  color: Colors.yellow,
  alignment: Alignment.center,
  child: Text('Centered Text'),
)

5. Transform
Le Container peut être transformé avec la propriété transform pour des effets tels que la rotation et la mise à l'échelle.

Container(
  width: 100,
  height: 100,
  color: Colors.purple,
  transform: Matrix4.rotationZ(0.1),
)

6. Combining Properties
Un exemple combinant plusieurs propriétés pour un Container complexe.

Container(
  width: 150,
  height: 150,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(20),
  alignment: Alignment.bottomRight,
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.circular(15),
    border: Border.all(
      color: Colors.black,
      width: 3,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(4, 4),
        blurRadius: 10,
      ),
    ],
  ),
  child: Text('Flutter'),
)

Le Container est extrêmement puissant et polyvalent, ce qui en fait un élément de base pour la construction d'interfaces utilisateur en Flutter. En utilisant ces propriétés, vous pouvez créer des interfaces riches et attrayantes.

Rejoignez-nous demain pour découvrir un nouveau widget Flutter et enrichir votre boîte à outils de développement Flutter ! 🚀

On vas faire une série de base sur 30 widgets flutter pour bien comprendre le framework, comme on le dit : En Flutter tout est un widget.

De votre côté n'hésitez pas tester les snipets de code envoyé et jouer avec pour voir comment ça fonctionne , modifié le et devenez familier avec.

Pour ceux rencontrant des difficultés n'hésitez pas à écrire dans le groupe de discussion ci dessous.

Sur ce bon voyage vers le monde des widgets 🚀

https://t.me/techwithdilan


Pour les questions et les préoccupations à-propos de Flutter et autres , on peut discuter dans ce groupe.

Ready For Day 2 Of Flutter Widgets ?

#Day 2 :Flutter Widget of the Day: Column & Row
Aujourd'hui, nous explorons deux widgets fondamentaux de Flutter : Column et Row. Ces widgets sont essentiels pour organiser et structurer vos interfaces utilisateur en disposition verticale et horizontale respectivement.

Qu'est-ce qu'un Column ?
Le widget Column permet d'organiser des widgets enfants de manière verticale, les uns au-dessus des autres.

Qu'est-ce qu'un Row ?
Le widget Row permet d'organiser des widgets enfants de manière horizontale, les uns à côté des autres.

Exemple de Column
```

import 'package:flutter/material.dart';

void main() => runApp(ColumnExample());

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: Colors.red,
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(bottom: 10.0),
          child: Text('First Container'),
        ),
        Container(
          color: Colors.green,
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(bottom: 10.0),
          child: Text('Second Container'),
        ),
        Container(
          color: Colors.blue,
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(bottom: 10.0),
          child: Text('Third Container'),
        ),
      ],
    );
  }
}

```
Exemple de Row
```

import 'package:flutter/material.dart';

void main() => runApp(RowExample());

class RowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          color: Colors.red,
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(right: 10.0),
          child: Text('First Container'),
        ),
        Container(
          color: Colors.green,
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(right: 10.0),
          child: Text('Second Container'),
        ),
        Container(
          color: Colors.blue,
          padding: EdgeInsets.all(16.0),
          margin: EdgeInsets.only(right: 10.0),
          child: Text('Third Container'),
        ),
      ],
    );
  }
}

```
Propriétés Utilisées
Les exemples ci-dessus montrent comment les Column et Row peuvent être utilisés avec des Container pour structurer les widgets enfants. Voici quelques propriétés utilisées :

children: Liste des widgets enfants à disposer dans la Column ou la Row.
Container: Utilisé pour ajouter des propriétés comme la couleur de fond, le padding, et les marges aux widgets enfants.
Conclusion
Les widgets #ColumnColumn et #RowRow sont des éléments de base essentiels pour la mise en page dans Flutter, permettant de structurer vos interfaces de manière verticale et horizontale. En utilisant ces widgets avec d'autres comme le Container, vous pouvez créer des interfaces utilisateur bien organisées et visuellement agréables.

Restez à l'écoute pour plus de widgets Flutter dans notre série "Flutter Widget of the Day" !


Vous avez des questions ou des suggestions pour le prochain widget ? Faites-le nous savoir dans les commentaires ! 🛠✨

#Flutter #WidgetOfTheDay #FlutterDev #MobileDevelopment

https://www.linkedin.com/posts/gdscictuniversity_hacktoberfest2024-opensource-communautaeztech-activity-7252690133236215808-9hD9?utm_source=share&utm_medium=member_android


Rejoignez nous ce samedi pour la première session sur le hacktoberfest, à 21h precis online.

Le lien vous sera envoyé automatiquement par email après reservation en ligne.

Lien :https://gdg.community.dev/e/mr9mhk/

https://youtube.com/live/hNV8dFLvcI0

Nous sommes en direct 😆🔥🪄

Signale ta présence par une simple réaction 🙂‍↕

Vous avez une question à propos de la technologie? Vous voulez *partager vos pensées sur un domaine? 💭

Nous sommes là pour vous !

*Rejoignez notre _séance hebdomadaire de Q&A anonyme_ !

Envoyez des questions en anonymat et les vendredis on se rassemble pour proposer des réponses!!

Quand : Tous les *vendredis à 20h

Où : https://chat.whatsapp.com/If5NdLbeGjMAxyGC8hkuml

*Envoyez vos questions ici:

https://ngl.link/gdgocict

Rejoignons-nous et grandissons ensemble ! 🌱