Flutter101 - Layout example

readme.md

Flutter101 - Layout example

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  const MyAppBar({required this.title, super.key});

  // Dans un widget, les propriétés sont toujours marquées "finales".
  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0, // les tailles sont exprimées en points
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row est un empilement horizontal de Widgets
      child: Row(
        children: [
          const IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null désactive le bouton
          ),
          // Expanded étend son enfant
          // pour remplir tout l'espace disponible.
          Expanded(
            child: title,
          ),
          const IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  const MyScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    // Material est un élément de base
    // sur lequel les Widgets material peuvent se dessiner.
    return Material(
      // Column est un empilement vertical de Widgets
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context) //
                  .primaryTextTheme
                  .headline6,
            ),
          ),
          const Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      title: 'My app', // Utilisé par l'OS
      home: SafeArea(
        child: MyScaffold(),
      ),
    ),
  );
}