自定义widget

1.编写自定义MyWidget

import 'package:flutter/material.dart';

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

//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  const Center(
      child: Text(
        'Hello Flutter 666688169',
        textDirection: TextDirection.ltr,
      ),
    );
  }

}

效果：

2.添加样式

import 'package:flutter/material.dart';

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

//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  const Center(
      child: Text(
        'Hello Flutter 88888',
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),
      ),
    );
  }

}

效果：

3.创建一个MaterialApp

import 'package:flutter/material.dart';

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


class APP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWidget(),
    );
  }
}



//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  const Center(
      child: Text(
        'Hello Flutter 88888',
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),
      ),
    );
  }

}

效果

4.创建导航栏

import 'package:flutter/material.dart';

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


class APP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutterDemo')
        ),
        body: MyWidget(),
      ),
    );
  }
}



//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  const Center(
      child: Text(
        'Hello Flutter 88888',
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),
      ),
    );
  }

}

效果：

5.修改导航栏主题色

import 'package:flutter/material.dart';

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


class APP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutterDemo')
        ),
        body: MyWidget(),
      ),
      theme: ThemeData(
          primarySwatch: Colors.red
      )
    );
  }
}



//stateless 无状态  stateful 有状态
//一个widget就是一个类
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  const Center(
      child: Text(
        'Hello Flutter 8',
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 38.0,fontWeight: FontWeight.bold,color: Colors.red),
      ),
    );
  }

}

效果：