# flutter_app

**Repository Path**: hikaruhiro/flutter_app

## Basic Information

- **Project Name**: flutter_app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-08
- **Last Updated**: 2021-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### [Gitee地址](https://gitee.com/hikaruhiro/flutter_app.git)
### 创建flutter应用
```javascript
fluter creat flutter_app
```
### web启动服务
```javascript
flutter run -d chrome
```
### 去除debuger bannber
```javascript
 debugShowCheckedModeBanner: false,
```
### Drawer

- componets/drawer_containter.dart
```dart
import 'package:flutter/material.dart';

class DrawerContianer extends StatelessWidget {
  const DrawerContianer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                },
              ),
            ],
          ),
    );
  }
}
```

- main.dart
```dart
import 'package:flutter/material.dart';
import './components/drawer_container.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Color.fromRGBO(37, 40, 47, 1),
        brightness: Brightness.dark,
      ),
      home: MyHomePage(title: '信号区'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        endDrawer: DrawerContianer());
  }
}

```
### 设置路由
[MaterialApp文档](https://api.flutter-io.cn/flutter/material/MaterialApp-class.html)
```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Color.fromRGBO(37, 40, 47, 1),
        brightness: Brightness.dark,
      ),
      initialRoute: '/',
      routes: {
         '/': (context) => MyHomePage(title: '信号区')
      },
    );
  }
}

```


### 目录拆分
![image.png](https://cdn.nlark.com/yuque/0/2021/png/160008/1615195073933-af6f641c-b113-455c-ab9e-a4b54423a5cc.png#align=left&display=inline&height=84&margin=%5Bobject%20Object%5D&name=image.png&originHeight=84&originWidth=249&size=5836&status=done&style=none&width=249)
```dart
components //放组件
pages //放页面
```
#### pages/home_page.dart
```dart
import 'package:flutter/material.dart';
import '../components/drawer_container.dart';
class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        endDrawer: DrawerContianer());
  }
}

```
#### paegs/list_page.dart
```dart
import 'package:flutter/material.dart';
class ListPage extends StatelessWidget {
  const ListPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('ListPage'),
    );
  }
}
```
#### pages/login_page.dart
```dart
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
  const LoginPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('LoginPage'),
    );
  }
}
```
#### main.dart
```dart
import 'package:flutter/material.dart';
import './pages/home_page.dart';
import './pages/login_page.dart';
import './pages/list_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Color.fromRGBO(37, 40, 47, 1),
        brightness: Brightness.dark,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(title: '信号区'),
        '/login': (context) => LoginPage(),
        '/list': (context) => ListPage(),
      },
    );
  }
}


```
### pubspec.yaml 设置本地图片目录
```dart
flutter:
  assets:
    - lib/assets/images/
```
#### pages/login_page.dart
```dart
import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
        centerTitle: true,
      ),
      body: Theme(
        data: Theme.of(context).copyWith(
          primaryColor: Colors.orange,
        ),
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  width: double.infinity,
                  child: Image.asset(
                    'lib/assets/images/header-illustration.png',
                  )),
              RegisterForm(),
            ],
          ),
        ),
      ),
    );
  }
}

class RegisterForm extends StatefulWidget {
  @override
  RegisterFormState createState() => RegisterFormState();
}

class RegisterFormState extends State<RegisterForm> {
  final registerFormKey = GlobalKey<FormState>();
  String username, password;
  bool autovalidate = false;

  void submitRegisterForm() {
    if (registerFormKey.currentState.validate()) {
      registerFormKey.currentState.save();

      debugPrint('username: $username');
      debugPrint('password: $password');

      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('Registering...'),
      ));
    } else {
      setState(() {
        autovalidate = true;
      });
    }
  }

  String validateUsername(value) {
    if (value.isEmpty) {
      return 'Username is required.';
    }

    return null;
  }

  String validatePassword(value) {
    if (value.isEmpty) {
      return 'Password is required.';
    }

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              labelText: '用户名',
              helperText: '',
            ),
            onSaved: (value) {
              username = value;
            },
            validator: validateUsername,
            autovalidate: autovalidate,
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: '密码',
              helperText: '',
            ),
            onSaved: (value) {
              password = value;
            },
            validator: validatePassword,
            autovalidate: autovalidate,
          ),
          SizedBox(
            height: 32.0,
          ),
          Container(
            width: double.infinity,
            child: RaisedButton(
              child: Text('登录', style: TextStyle(color: Colors.white)),
              elevation: 0.0,
              onPressed: () {
                //  Navigator.pushNamed(context, '/');
                Navigator.of(context).pushNamed(
                  "/",
                  arguments: {'name': 'hikaru', 'age': 18},
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

```
![image.png](https://cdn.nlark.com/yuque/0/2021/png/160008/1615197057479-8057d2cd-22f0-4927-87ce-7036a7448204.png#align=left&display=inline&height=813&margin=%5Bobject%20Object%5D&name=image.png&originHeight=813&originWidth=378&size=27278&status=done&style=none&width=378)