flutter10個常用的元件

//基礎格式。Text元件
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text Widgetdddddd',
        home: Scaffold(
          body: Center( 
            child: Text(
              'Heldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgest',
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  fontSize: 25.0, color: Color.fromARGB(255, 255, 127, 127)),
            ),
          ),
        ));
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text Widgetdddddd',
        home: Scaffold(
          body: Center(
            child: Container(
              child: new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg",
                fit: BoxFit.contain,
                repeat: ImageRepeat.repeat,
              ),
              width: 300.0,
              height: 200.0,
              color: Colors.blue,
            ),
          ),
        ));
  }
}

列表元件

import 'package:flutter/material.dart';

void main() =>
    runApp(MyApp(items: new List<String>.generate(100, (i) => "Item $i")));

class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({Key key, @required this.items}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          body: new ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                return new ListTile(
                  title: new Text('${items[index]}'),
                );
              })),
    );
  }
}

 

網格元件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        appBar: new AppBar(title: new Text('網格元件')),
        body: new Container(
            child: new GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1,
          ),
          children: <Widget>[
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
            new Image.network(
                "https://blogimages.jspang.com/blogtouxiang1.jpg"),
          ],
        )),
      ),
    );
  }
}

佈局:5種

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: new AppBar(title: new Text('Row佈局')),
          body: new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: () {},
                color: Colors.blue,
                child: new Text('Blue'),
              ),
              Expanded(
                  child: new RaisedButton(
                onPressed: () {},
                color: Colors.orange,
                child: new Text('Blue'),
              )),
              new RaisedButton(
                onPressed: () {},
                color: Colors.blue,
                child: new Text('Blue'),
              )
            ],
          )),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          appBar: new AppBar(title: new Text('Colum佈局')),
          body: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(child: Text('I am JSPang')),
              Expanded(child: Text('my website is jspang.com')),
              Center(child: Text('I love coding'))
            ],
          )),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://blogimages.jspang.com/blogtouxiang1.jpg'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlue,
          ),
          padding: EdgeInsets.all(5.0),
          child: new Text('JSPang 技術胖'),
        ),
        new Positioned(
          top: 10.0,
          left: 10.0,
          child: new Text('JSPang.com'),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          child: new Text('技術胖'),
        )
      ],
    );

    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('垂直方向佈局'),
        ),
        body: Center(child: stack),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var card = new Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title: new Text(
              '吉林省吉林市昌邑區',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: new Text('技術胖:1513938888'),
            leading: new Icon(
              Icons.account_box,
              color: Colors.lightBlue,
            ),
          ),
          new Divider(),
          ListTile(
            title: new Text(
              '北京市海淀區中國科技大學',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: new Text('勝巨集宇:1513938888'),
            leading: new Icon(
              Icons.account_box,
              color: Colors.lightBlue,
            ),
          ),
          new Divider(),
          ListTile(
            title: new Text(
              '河南省濮陽市百姓辦公樓',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: new Text('JSPang:1513938888'),
            leading: new Icon(
              Icons.account_box,
              color: Colors.lightBlue,
            ),
          ),
          new Divider(),
        ],
      ),
    );

    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('卡片佈局'),
        ),
        body: Center(child: card),
      ),
    );
  }
}