Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money.

📝 [Flutter] learning to form a record, [programmer essential knowledge]

📔 — Scaffold of Flutter [03]!

1. Write at the front

The Container component of Flutter was introduced in our previous article. Today we continue our study of the Scaffold component of Flutter.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

2. What is scaffolding?

Scaffold is the basic implementation of Material Design layout structure. This class provides apis for displaying drawers, snackbars, and bottom sheets.

2.1 Main attributes

  • AppBar: An appBar displayed at the top of the interface
  • Body: The main content displayed on the current interface
  • FloatingActionButton: A function button defined in Material.
  • PersistentFooterButtons: The buttons that are fixed to the bottom display.
  • Drawer: sidebar control
  • BottomNavigationBar: Displays the navigation bar button bar at the bottom.
  • BackgroundColor: backgroundColor
  • ResizeToAvoidBottomPadding: control interface content body whether or not to the bottom of the layout to avoid being covered, such as when the keyboard display, layout again to avoid being the keyboard cover. The default value is true.

2.2 Code Examples

import 'package:flutter/material.dart';
void main(a){

  runApp(App());

}
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    returnMaterialApp( home: Home() ); }}class _Home extends State<Home> {
    int  _index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ScaffoldDemo"), ), body: MyWidget(), ); }}Copy the code
  • The custom Widget
// Customize a Widget, StatelessWidget, stateless, StatefulWidget
class MyWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: const Text(
        "Hello World!",
        textDirection:TextDirection.ltr,
        style: TextStyle(
          fontSize: 25.0, fontWeight: FontWeight.bold, color: Colors.red, ), ), ); }}Copy the code
  • Code run result

  • bottomNavigationBar
class _Home extends State<Home> {
    int  _index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ScaffoldDemo"),
      ),
      body: MyWidget(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _index == 0 ? Colors.green : Colors.grey,
            ),
            label: "Home page",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add,
              color: _index == 1 ? Colors.green : Colors.grey,
            ),
          label:"Add a friend",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.people,
              color: _index == 2 ? Colors.green : Colors.grey,
            ),
            label:"I",
          )
        ],
        currentIndex: _index,
        //BottomNavigationBar click event
        onTap: (flag) {
          print("flag = $flag");
          setState(() {
            _index = flag;/ / switch}); },),); }}Copy the code

BottomNavigationBar is equivalent to the Tabbar of OC

More detailed look at the content of the Scaffold of API here. The flutter, flutter/dev/mat…

3. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹