---
# System prepended metadata

title: 基礎layout

---

# 基礎layout

### Scaffold 
有默認的banner, background color, 提供API讓你新增 drawers, snack bars, 和 bottom sheets。

```java 
void main() {
  runApp(MaterialApp(
    title: 'flutter_demo',
    home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(child:Text('name : jess')),
  ));
}
```
![](https://i.imgur.com/s7VSivC.png =50%x)

---

#### 加入右下角的按鈕

```java 
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center();
  }
}

void main() {
  runApp(MaterialApp(
    title: 'flutter_demo',
    home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(child:Text('name : jess')),
        floatingActionButton: FloatingActionButton(
            onPressed: null, child: const Icon(Icons.add))),
  ));
}
```

![](https://i.imgur.com/xVya2xT.png =50%x)

---

### 修改背景顏色

```java
void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'flutter_demo',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter layout demo'),
      ),
      body: Home(),
      backgroundColor: Colors.blueGrey.shade200,
    ),
  ));
}
```

![](https://i.imgur.com/DEeThXg.png =50%x)


---

### 修改app主題顏色
```java 
return MaterialApp(
    //...
    theme: ThemeData(
      primaryColor: Colors.red,
      primaryColorDark: Colors.red,
      accentColor: Colors.red,
));
```
![](https://i.imgur.com/tIzRKcd.png =50%x)

---

### 其他地方吃主色

```java 
color: Theme.of(context).primaryColor,
```